CSS3 Border Radius property

by Hough on March 31, 2011

New version of CSS, ie CSS3 has included many superb features to developers armory.  Here we are going to talk about its latest feature which enables us to create round corner boxes without using images. Web developers are very well aware with the headache of creating flexible and re-sizable rounded corner box. It requires minimum 4  div tags in HTML. And, if there is border included it can easily take you 8 div tags to create flexible rounded box.

In CSS3 however you can achieve this feat using few line of CSS code and just single div tag. You can do it using, CSS3 property called border-radius. To explain this thing better let’s consider one simple rectangle box.

This is sample box.

To make this above box rounded few line of advanced CSS should be applied. Let’s say this box is made with div tag and has class name rounder.


div.rounder{
    -webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	 border-radius: 7px;
}

Here, as above code is showing we are giving border radius 7px to our div.  After applying this code to div, rounded corners of size 7px will be appeared in the box. and it will look something like this,

This is sample box.

It’s really amazing feature giving its simplicity and easiness to create rounded  corners box.

This feature supports all the latest browsers like,  Firefox 3+, IE9+, Opera 10.5+, Chrome 4+, Safari 3.1+ .

 

Leave a Comment

Previous post:

Next post: