• Article

Replace Those Images with CSS: Rounded Corners

Nicholas Zakas | December 8th, 2010

 

To me, one of the most exciting aspects of CSS3 is the ability to eliminate images from my CSS code. There are now multiple new CSS properties that can effectively replace the small, sliced-up images we all used to need to create visually stunning designs on the web. Gone are the days of spending time aligning the disparate pieces of a design involving rounded corners with drop shadows and gradients. Replacing these images with CSS has several advantages:

  • Decreased maintenance overhead – There's no need to create, update, and keep track of these image files. Instead of spending time figuring out how to logically arrange images onto a sprite, you can spend time on the next project.
  • Improved performance – Without additional HTTP requests, your design (as well as the entire page) loads faster.
  • Fewer visual "errors" – Relying on images for key visuals introduces the potential that the images might not download. This can happen for any number of reasons: a dropped network connection, high latency, server errors, etc. With CSS defining more of your design there are fewer points of failure to deliver a great user experience.

While CSS3 can't ensure that you'll never need any images ever again, there are enough options that you can likely eliminate a lot of the "helper" images used to create the details of today's beautiful web sites.

The border-radius Property

The CSS property name for rounded corners is border-radius. By providing a single value, you can specify the border radius of an element in all four corners. The values used for setting the horizontal and vertical border radius may be any valid CSS measurement, including ems, exs, points, pixels, percentages, etc. For example:

border-radius: 15px;

When applied to an element, this specifies each corner to have a horizontal border radius of 15px as well as a vertical border radius of 15px (see the image below).

Similar to the border property, you can provide one, two, three, or four measurements to border-radius. In this case, the first value is for the top-left corner and each subsequent value is for the next corner going clockwise (so the second is top-right, and so on). If there are only two values, the first applies to the top-left and bottom-right while the second applies to the top-right and bottom-left. If three values are provided, the fourth value is copied from the second. Some examples:

border-radius: 15px 5px; 
border-radius: 15px 5px 25px; 
border-radius: 15px 5px 25px 0px;

There is an optional second set of values that border-radius uses, which are the vertical radius measurements. These are included after a slash in the property value and behave the same as the first set of values, accepting at least one and at maximum four measurements to be applied to the corners beginning with the top-left. If there's only one extra value, it's considered the vertical radius for all four corners; two values means the first is applied to the top-left and bottom-right while the second applies to the top-right and bottom-left. For example:

border-radius: 15px 5px / 3px; 
border-radius: 15px 5px 25px / 3px 5px; 
border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;

Keep in mind that setting either a horizontal or vertical radius to 0 results in the corner becoming a square.

Individual Border Radii

In addition to the shorthand border-radius property that sets the border radius for all four corners, there are also four individual properties:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

Each of these properties sets the border radius for a specific corner, and each can accept one or two values. When one value is provided, it's considered to be both the horizontal and vertical radius measurement. For example:

border-top-left-radius: 15px;

By providing a second value, the first becomes the horizontal radius and the second is the vertical radius:

border-top-left-radius: 15px 5px;

Note that you don't need to provide a slash in between the values when using one of the corner-specific properties.

Support and Usage

Internet Explorer 9, Opera 10.5, Safari 5, Chrome 4, and Firefox 4 all support border-radius without any vendor prefix. Earlier versions of Safari and Chrome require a –webkit- prefix while earlier versions of Firefox require a –moz- prefix. At this time, it's recommended to use just the Firefox-specific property in addition to the standard one for optimal browser coverage:

-moz-border-radius: 15px;
border-radius: 15px;

Keep in mind that the standard declaration should come last when included together with a vendor-specific declaration.

Firefox prior to version 4 also has a slightly different syntax for the individual border radii:

  • -moz-border-radius-topleft is the equivalent of border-top-left-radius
  • -moz-border-radius-topright is the equivalent of border-top-right-radius
  • -moz-border-radius-bottomleft is the equivalent of border-bottom-left-radius
  • -moz-border-radius-bottomright is the equivalent of border-bottom-right-radius

If you are using individual border radii properties and want to support earlier versions of Firefox, then you'll need to include these in addition to the standard property names.

Caveats

Although rounded corners are fairly well supported across all major browsers, there are still some problems with compatibility. All browsers perform very well when all four borders are the same color, same width, same style (solid, dashed, etc.), and measurements are specified in whole units (not percentages). As soon as borders have different characteristics on different sides and border radii are applied, browsers start to behave very differently. Also, not all browsers accurately support percentages for border radius measurements. The following example illustrates some of the problems (trying viewing in a few different browsers):

border-color: black;
border-style: solid dashed;
border-width: 1px 2px 3px;
border-top-color: red;
border-radius: 5%;

Microsoft has a fairly exhaustive test suite for border-radius around which they are hoping browsers can standardize on the less-common use cases. Until browsers converge on a solution for complex cases, it's safest to stick to borders of the same style and width on each side and without percentage measurements when using border-radius.

Conclusion

Rounded corners on the web are now easily created using the CSS3 border-radius property. In the next article in this series, I'll look at another part of CSS3 that allows you to eliminate images: box-shadow.

 

About the Author

Nicholas C. Zakas is a principal engineer at Yahoo!, where he is front-end tech lead for the Yahoo! homepage and a contributor to the YUI library. He is the author of Professional JavaScript for Web Developers (Wrox, 2009), Professional Ajax (Wrox, 2007), and High Performance JavaScript (O'Reilly, 2010). Nicholas is a strong advocate for development best practices including progressive enhancement, accessibility, performance, scalability, and maintainability.

Find Nicholas on: