Border-radius: rounded corners in CSS3

The css3 property border-radius allows to create rounded corners to the elements.

Its value is specified in measure of units or percent.

Right now, the border-radius is compatible with Safari3+ and Firefox using the css3 correspondent: -webkit-border-radius and -moz-border-radius.

Example of css rule:

border: 5px solid red;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;

NB: in the above example I am using the value ‘solid’ for the css property border, the other values such as dotted, double, inset…(View the test page…)

2 values can be applied to the property border-radius: the first one for the horizontal radius, the second one for the vertical radius.

Example of css rule:

border: 5px solid red;
-moz-border-radius: 25px 10px;
-webkit-border-radius: 25px 10px;

NB: Firefox do not follow the specific applying the first value to the top-left/bottom-right corner and the second value to the top-left/bottom-right corner.

If we are using a background color without a border, the element’s background will itself have rounded corner.

Example of css rules:

background-color: #CCCCCC;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;

The property border-radius can be applied to one specific corner:

• border-top-right-radius for the top right corner
• border-bottom-right-radius for the bottom right corner
• border-top-left-radius for the top left corner
• border-bottom-left-radius for the bottom left corner

NB: the css3 equivalent for Firefox are: -moz-border-radius-topright, -moz-border-radius-topleft, -moz-border-radius-bottomleft e
-moz-border-radius-bottomright. For Safari, simply add -webkit in front.

Example of css rule:

border: 5px solid red;
-moz-border-radius-bottomleft: 25px;
-webkit-border-bottom-left-radius: 25px;

View the test page for the css3 property border-radius >>