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....
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIuwalr4tRuJ2ZJ2fyYu-kGcBIbNRQw-mReLGg8DZp43VPTkPQhsZqlUIinsAyUG48M8pWUQrCuJHmKIRAio_ovhhxnwIi6l8AEBbTTGvhBscabzAxRFNcqXeYOmYUWInVBqYVYbEyc8k/s1600/finished.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIuwalr4tRuJ2ZJ2fyYu-kGcBIbNRQw-mReLGg8DZp43VPTkPQhsZqlUIinsAyUG48M8pWUQrCuJHmKIRAio_ovhhxnwIi6l8AEBbTTGvhBscabzAxRFNcqXeYOmYUWInVBqYVYbEyc8k/s1600/finished.png)
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.
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}So that's the basic one, now for the more interesting effects...
#box2{background:#660000; border-radius:5px; height:100px; width:100px}
#box2{background:#660000; border-radius:5px; height:100px; width:100px}
Border-Radius Creates Circles
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIuwalr4tRuJ2ZJ2fyYu-kGcBIbNRQw-mReLGg8DZp43VPTkPQhsZqlUIinsAyUG48M8pWUQrCuJHmKIRAio_ovhhxnwIi6l8AEBbTTGvhBscabzAxRFNcqXeYOmYUWInVBqYVYbEyc8k/s1600/finished.png)
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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIuwalr4tRuJ2ZJ2fyYu-kGcBIbNRQw-mReLGg8DZp43VPTkPQhsZqlUIinsAyUG48M8pWUQrCuJHmKIRAio_ovhhxnwIi6l8AEBbTTGvhBscabzAxRFNcqXeYOmYUWInVBqYVYbEyc8k/s1600/finished.png)
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.
3 Uses For CSS3 Border-Radius
Reviewed by Opus Web Design
on
January 08, 2015
Rating:
![3 Uses For CSS3 Border-Radius](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIuwalr4tRuJ2ZJ2fyYu-kGcBIbNRQw-mReLGg8DZp43VPTkPQhsZqlUIinsAyUG48M8pWUQrCuJHmKIRAio_ovhhxnwIi6l8AEBbTTGvhBscabzAxRFNcqXeYOmYUWInVBqYVYbEyc8k/s72-c/finished.png)