CSS3 Explained

CSS3 Tutorials and New Features

CSS Border Radius

CSS Border Radius

2 months ago by Chris

CSS Border-Radius

CSS3 introduces a simple way to create rounded corners, using the new border-radius property without the need to create corner images and using multiple div elements. The border-radius command is currently supported in almost all major browsers with the exception of internet explorer 8 or less. IE9 beta does support border-radius.

A basic border-radius example

This box will have 10 pixel rounded corners in Firefox, Safari/Chrome and IE9.

#box {

 -webkit-border-radius: 10px;

 -moz-border-radius: 10px;

 border-radius: 10px;

}

Syntax / More Details

Rounded corners can either be added simultaneously with one command for all four corners or you can specifically control the size of each corner. The size values can be expressed as pixels or as a percentage. For example, to create a box with different corner sizes, use the following syntax;

This box has some varying corner sizes

#box2 {

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

  border-bottom-right-radius: 10% 5%;

  border-top-right-radius: 10px; 

}

Border-Radius Examples

Here are some further examples of the border-radius command, and shows some of the interesting effects you can produce with just a few lines of CSS3 code.

Box 3 Example
Box 4 Example
Box 5 Example
Box 6 Example
Box 7 Example

#box3 {

-moz-border-radius-bottomright: 50px;

border-bottom-right-radius: 50px;

}



#box4 {

-moz-border-radius-bottomright: 50px 25px;

border-bottom-right-radius: 50px 25px;

}



#box5 {

-moz-border-radius-bottomright: 25px 50px;

border-bottom-right-radius: 25px 50px;

}



#box6 {

-moz-border-radius: 1em 4em 1em 4em;

border-radius: 1em 4em 1em 4em;

}



#box7 {

-moz-border-radius: 25px 10px / 10px 25px;

border-radius: 25px 10px / 10px 25px;

}