CSS3 Border Radius Property (Rounded Corners)

This week our colleague Sam who usually records our web design video blogs is away on holiday. So we’ve decided to upgrade an older video blog on the new CSS3 border radius property. The CSS3 Border Radius property was announced as long ago as 2005, and has been one of the most commonly used and supported properties of CSS3. Introducing the Border Radius property onto your Style Sheets allows you to effectively ’round’ the corners of many HTML elements such as Divs and Input Fields.

The CSS3 Border Radius property is now supported on IE9, Firefox, Safari, Opera and Chrome. However as Mozilla’s Firefox has yet to fully adopt the standard Border Radius property, you also want to be doubling up by using the ‘-moz-’ prefix as per the code below:

Setting all 4 corners of an element

By setting a single radius as per the example below, you are effectively defining the border radius for all four corners consistently. This is the same principal as other common CSS properties like Margin and Padding.

border-radius:20px;
-moz-border-radius:20px;

Setting opposite corners of an element

If you define two radius’s like in the second figure below, then you are defining two opposite sets of corners. The first size sets the top left and bottom right, whilst the section radius controls the top right and the bottom left.

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

Setting all 4 corners individually

And finally, if you wish to set all four corners individually, simply add all radius’s like in the coding below. Again, this works much like Padding and Margin property definitions, however instead of ‘Top’ being first, you start with ‘Top Left’, going round clockwise.

border-radius:80px 40px 20px 10px;
-moz-border-radius:80px 40px 20px 10px;