Skip to Main Content

Mar 23, 2010 | 4 minute read

CSS for Corner Curves

written by Armando

Curves are a natural shape that Web designers often wish to include in website navigation, content blocks, and borders.

Examples of curves in site design can be found on many leading ecommerce sites including the member login block on Aeroplan's website;  the main merchandising section on Wal-Mart's home page; and the top navigation at GameStop.

While there are certainly many ways to get a curvy corner, oval, or ellipse effect for a Web project, a good designer's first choice is often to use the Web's primary presentation and formatting method, a style sheet.

CSS Rounded Corners

Cascading Style Sheets (CSS) are, as I alluded to above, the preferred mechanism for adding style  to Web documents, so it would make sense that CSS would be the preferred way to manage curved corners. Of course, there may be some browser challenges, but more on that later.

The CSS standard for corner curves uses the border-radius attribute. The most basic border radius description is written for a specific corner, for example border-top-left-radius, and takes one or two properties defined as either a length or a percentage.

border-top-left-radius: 5em 4em;

In this example, the CSS would curve the top left corner of some element so that each length or percentage describes the radii of a quarter ellipse.

Image show an example of the radii

A single length or percentage— border-top-left-radius: 5em;—is the same as repeating the measurement— border-top-left-radius: 5em 5em;.

Styling Multiple Corners at Once

If I wanted to style all of the corners of a box, I could describe each curve individually:

border-top-left-radius:     4em;

border-top-right-radius:    2em;

border-bottom-right-radius:  4em;

border-bottom-left-radius:  2em;

Or is could use a simpler, shorthand notation. Where the first parameter represents the top left corner and the second parameter represents the top right corner. The third stands in for the bottom right corner, and a fourth represents the bottom left corner. If only two parameters are given, the browser assumes that they repeat for the bottom right corner and the bottom left corner respectively.

border-radius: 4em 2em;

Is the same as:

border-radius: 4em 2em 4em 2em;

Image shows the radii length of each curved corner example

If the radius is the same for both lengths of each corner, I can describe the curve with a single dimension or percentage.

border-radius: 10em;

Image shows an example wherein all of the corner radii are the same.

If I wish to designate a particular length for each radii of each corner, I can use a "/" to distinguish these in the shorthand notation. So that this CSS border-radius: 40em / 10em; produces the example same shape as the following:

border-top-left-radius:     40em 10em;

border-top-right-radius:    40em 10em;

border-bottom-right-radius:  40em 10em;

border-bottom-left-radius:  40em 10em;

Image shows an example of four corners with a 40em 10em curved corner.

If by chance I forgot the slash in the shorthand notation, I would get a completely different figure. So that border-radius: 40em  10em; is actually the same as this bit of CSS.

border-top-left-radius:     40em ;

border-top-right-radius:     10em;

border-bottom-right-radius:  40em ;

border-bottom-left-radius:   10em;

This image demonstrates the importance of the slash.

Potential Problems You'll Want to Avoid

To quote the CSS3 standard, "the center of color and style transitions between adjoining borders is at the point on the curve that is at an angle that is proportional to the ratio of the border widths. For example, if the two widths are equal, that point is at a 45° angle, and if one is twice the width of the other the point is at a 30° angle. The line demarcating this transition is drawn between the point at that angle on the outer curve and the point at that angle on the inner curve.

"Color and style transitions must be contained within the segment of the border that intersects the smallest rectangle that contains both border radii as well as the center of the inner curve (which may be a point representing the corner of the padding edge, if the border radii are smaller than the border-width)."

Make sense? There are essentially two things to take away from this. First, if the angle described above fits within the width of the border, the inside edge of your curvy corner will, in fact, be square not curved.

Shows an image of an inside corner that is square.

When the point of the angle is inside of the border, both the outer and inner edges curve.

Show an example with both an inner and outer curve on the border.

The second challenge has to do with element height and how long the curve takes to be completed. The CSS standard does not allow curved corner to overlap, so you must ensure that the element that you are adding the curved corners to is tall enough to support the radii you describe.

Now For the Bad News

After spending nearly the entire post writing about the border-radius attribute in its various forms, I must inform you that at the time I am writing this post, only Google's Chrome browser really supports CSS3 curved corners.

But not all hope is lost, several other browsers support similar attributes which can be used in conjunction with the proper CSS3.

Mozilla's Firefox and Camino browsers will support -moz-border-radius. And Apple Safari will support –webkit-border-radius.

Other browsers like Microsoft's Internet Explorer and Opera have no support for corner curves at this time.

But don't worry too much. The border-radius property is one of the most popular parts of CSS3, so expect more support soon.

This post was contributed by our guest columnist Armando Roggio. Armando is a journalist, web designer, technologist and the site director for Ecommerce Developer.