CSS for Corner Curves
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.
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:
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;
If the radius is the same for both lengths of each corner, I can describe the curve with a single dimension or percentage.
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;
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-bottom-right-radius: 40em ;
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.
When the point of the angle is inside of the border, both the outer and inner edges curve.
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.
Like what you’re reading?
Check out some of our other great content here