alexa rank cert 3 Uses For CSS3 Border-Radius | OnlineDesignTeacher
WHAT'S NEW?
Loading...

Most Popular Topics

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.

Support Us