Design Notes, Tutorials and Articles: 3 Uses For CSS3 Border-Radius

As part of the month of web at OnlineDesignTeacher we are going to look at 3 good uses for the CSS border-radius tag. First off the obvious one....

Border-Radius For Rounded Edges

In the examples above each box is 200px high and wide. The first box has a border-radius of 10px, the second has 15px and the third 20px.

#box1{background:#660000; border-radius:5px; height:100px; width:100px}

#box2{background:#660000; border-radius:5px; height:100px; width:100px}

#box2{background:#660000; border-radius:5px; height:100px; width:100px}

So that's the basic one, now for the more interesting effects...

Border-Radius Creates Circles

In the examples above each box is 200px high and wide with a border-radius of 100px. The key to creating circles is for the border radius to be half of the height and width.

#box1{background:#660000; border-radius:100px;height:200px; width:200px;}

img{border-radius:100px; height:200px; width:200px;}

Border-Radius Creates Ellipses

In the examples above each box is 200px high and 300px wide with a border-radius of 50%. The key to creating ellipses is for the border radius to be 50%.

img{border-radius:50%; height:200px; width:300px;}

More web tips,templates and tutorials coming soon as part of our "month of web" at OnlineDesignTeacher. Follow us on Twitter and Facebook to be sure you don't miss out.