CSS 3.0 Series: The border-radius Property

The border-radius Properties

The border-radius CSS properties can be used to give borders rounded corners. The radius applies also to the background even if the element has no border.

We’ll be working with code for three different implementations of the border-radius properties. Soon all browsers will use the W3C recommended format but for now they still use these different versions and you must put them all in your code. They are…

W3C Recommendation (Opera, Internet Explorer 9 & Google Chrome) 
  border-top-left-radius
  border-top-right-radius
  border-bottom-right-radius
  border-bottom-left-radius

The Mozilla implementation (Firefox)
  -moz-border-radius-topleft
  -moz-border-radius-topright
  -moz-border-radius-bottomright
  -moz-border-radius-bottomleft

The WebKit implementation (Safari)
  -webkit-border-top-left-radius
  -webkit-border-top-right-radius
  -webkit-border-bottom-right-radius
  -webkit-border-bottom-left-radius


Syntax:
  border-top-left-radius <border-radius> <border-radius>? 
  -moz-border-radius-topleft <border-radius> <border-radius>? 
  -webkit-border-top-left-radius <border-radius> <border-radius>? 

The border-radius properties accept one <border-radius> value with an optional second value for elliptical corners. The two values define the radii of a quarter ellipse that defines the shape of the corner. The first value is the horizontal radius. The optional second value is the vertical radius, if omitted it is equal to the first.

The border radius value can also be a percentage. Percentages for the horizontal radius refer to the width of the box, whereas percentages for the vertical radius refer to the height of the box. In the Mozilla implementation the percentage is relative to the width even when specifying the radius for a height. Percentages are not used in the WebKit implementation at the time of this post but work in the other two implementations.

This illustration from http://www.w3.org/TR/css3-background/#the-border-radius gives an excellent description of how lengths are used to create the curved corners.

The two values of ‘border-top-left-radius: 55pt 25pt’ define the curvature of the corner.

Examples With Shorthand Equivalants

Setting all four corners individually with the same value

border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;

-moz-border-radius-topleft: 25px;
-moz-border-radius-topright: 25px;
-moz-border-radius-bottomright: 25px;
-moz-border-radius-bottomleft: 25px;

-webkit-border-top-left-radius: 25px;
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;

If all four corners are the same, you can use the shorthand border-radius with one value and all corners will use that value.

border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;

Since the width of the box is 250px, 10% of 250px is 25px so this is equivalant also.

border-radius: 10%;
-moz-border-radius: 10%;
/* -webkit-border-radius: NOT SUPPORTED IN WEBKIT */

Setting all four corners individually with the same value and irregular corners (not circular)

border-top-left-radius: 50px 10px;
border-top-right-radius: 50px 10px;
border-bottom-right-radius: 50px 10px;
border-bottom-left-radius: 50px 10px;

-moz-border-radius-topleft: 50px 10px;
-moz-border-radius-topright: 50px 10px;
-moz-border-radius-bottomright: 50px 10px;
-moz-border-radius-bottomleft: 50px 10px;

-webkit-border-top-left-radius: 50px 10px;
-webkit-border-top-right-radius: 50px 10px;
-webkit-border-bottom-right-radius: 50px 10px;
-webkit-border-bottom-left-radius: 50px 10px;

The shorthand equivalant uses a slash to separate the values. The values before the slash set the horizontal radius and the values after the slash set the vertical radius

border-radius: 50px / 10px;
-moz-border-radius: 50px / 10px;
-webkit-border-radius: 50px / 10px;

All four corners are different

border-top-left-radius: 50px;
border-top-right-radius: 5px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 10px;

-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 25px;
-moz-border-radius-bottomleft: 10px;

-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 25px;
-webkit-border-bottom-left-radius: 10px;

The rules for the shorthand version of this are the four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

border-radius: 50px 5px 25px 10px;
-moz-border-radius: 50px 5px 25px 10px;
-webkit-border-radius: 50px 5px 25px 10px;

All four corners are different with irregular corners (not circular)

border-top-left-radius: 50px 10px;
border-top-right-radius: 5px 2px;
border-bottom-right-radius: 25px 5px;
border-bottom-left-radius: 10px 5px;

-moz-border-radius-topleft: 50px 10px;
-moz-border-radius-topright: 5px 2px;
-moz-border-radius-bottomright: 25px 5px;
-moz-border-radius-bottomleft: 10px 5px;

-webkit-border-top-left-radius: 50px 10px;
-webkit-border-top-right-radius: 5px 2px;
-webkit-border-bottom-right-radius: 25px 5px;
-webkit-border-bottom-left-radius: 10px 5px;

The values before the slash set the horizontal radius and the values after the slash set the vertical radius. The rules for the shorthand version of this are the four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

border-radius: 50px 5px 25px 10px / 10px 2px 5px 5px;
-moz-border-radius: 50px 5px 25px 10px / 10px 2px 5px 5px;
-webkit-border-radius: 50px 5px 25px 10px / 10px 2px 5px 5px;

Some source code to play with

Here is the source code for the last example (All four corners are different with irregular corners) which you can copy and paste into a text file and save it as something like borderradius.html and when you open it with an HTML5 friendly browser like Firefox 3.6 it will display the last example. You can change the values to explore on your own.

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS 3.0 border-radius Example</title>
</head>
<body>
<section>
<div style="
background-color: #dee;
padding: 10px;
width: 250px;
border: solid 1px #9CC7CA;
border-top-left-radius: 50px 10px;
border-top-right-radius: 5px 2px;
border-bottom-right-radius: 25px 5px;
border-bottom-left-radius: 10px 5px;

-moz-border-radius-topleft: 50px 10px;
-moz-border-radius-topright: 5px 2px;
-moz-border-radius-bottomright: 25px 5px;
-moz-border-radius-bottomleft: 10px 5px;

-webkit-border-top-left-radius: 50px 10px;
-webkit-border-top-right-radius: 5px 2px;
-webkit-border-bottom-right-radius: 25px 5px;
-webkit-border-bottom-left-radius: 10px 5px;
">

<p>Lorem ipsum dolor sit amet consectetuer mauris id 
sem porttitor sit neque nibh eros consequat sociis. Dolor 
Vestibulum scelerisque ullamcorper et urna lobortis laoreet 
tincidunt hac Vestibulum. Enim non faucibus laoreet odio eros 
massa tellus.</p> </div>
<h4>All four corners are different with irregular corners 
(not circular)</h4>
<pre>
border-top-left-radius: 50px 10px;
border-top-right-radius: 5px 2px;
border-bottom-right-radius: 25px 5px;
border-bottom-left-radius: 10px 5px;

-moz-border-radius-topleft: 50px 10px;
-moz-border-radius-topright: 5px 2px;
-moz-border-radius-bottomright: 25px 5px;
-moz-border-radius-bottomleft: 10px 5px;

-webkit-border-top-left-radius: 50px 10px;
-webkit-border-top-right-radius: 5px 2px;
-webkit-border-bottom-right-radius: 25px 5px;
-webkit-border-bottom-left-radius: 10px 5px;

</pre>
The values before the slash set the horizontal radius and 
the values after the slash set the vertical radius. The rules 
for the shorthand version of this are the four values for each 
radii are given in the order top-left, top-right, bottom-right, 
bottom-left. If bottom-left is omitted it is the same as top-right. 
If bottom-right is omitted it is the same as top-left. If top-right 
is omitted it is the same as top-left.
<pre>
border-radius: 50px 5px 25px 10px / 10px 2px 5px 5px;
-moz-border-radius: 50px 5px 25px 10px / 10px 2px 5px 5px;
-webkit-border-radius: 50px 5px 25px 10px / 10px 2px 5px 5px;

</pre>
</section>
</body>
</html>

All browsers from here on out will include these border-radius properties. Nowadays, these browsers run on phones as well as PC’s and soon they will be on our TVs and in our cars and who knows where else. I’d like one for my refrigerator.

Please leave a comment if you have any questions or corrections.