CSS3 - Round Corners

The latest version of CSS provides a way of specifying that one or more of the corners of the border around an element should be rounded. Each corner can be either a quarter circle if you specify one value for the radius of the curve or it can be a quarter ellipse if you szpecify two values.

The following attributes can be specified in your stylesheet to define that the specific corner should be rounded:

As an alternative to specifying each corner separately you can instead use the border-radius attribute which takes up to four values to specify the rounding for each corner. Where four are specified they represent the top left, top right, bottom right and bottom left corners respectively. When three are specified the missing fourth value is taken to be the same as the second value specified. When only two are specified the missing third value is taken to be the same as the first value so that diagonally opposite corners will be the same. When only one value is specified it is applied to all four corners.

When you want to specify different x and y distances from the corners when using the border-radius attribute you separate the two values using a slash.

Examples

#d1 {border-top-right-radius: 20px 10px;}
#d2 {border-radius: 2em 1em 1em 2em / 1em 2em 2em 1em;}

Limitations

Note that not all browsers support the full specification for rounded corners yet.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate