Cool CSS3 Effects: How to Create Rounded Corners Using CSS

Ever wondered how you can create rounded corner borders on a block element, such as <div>? It is very much possible with CSS3. Of course, you are still facing limitations because of the browser versions. However, most popular browsers’ latest versions all support it. One thing you cannot do (hopefully just yet) is to create a rounded border of different radius for each of the corners.

The browsers that support the CSS attributes below are FireFox (starting at version 1), Safari version 3+, iOS starting at version 1+, Android OS v1.5+, Opera 10.5+, IE starting at version 9 (not surprisingly), Chrome and probably some others.

Here is the CSS rule you would use to create the effect and make it cross-browser compatible:

div#my-rounded-box
{
	-moz-border-radius: 8px;		// this will apply to FireFox version 1+
	-webkit-border-radius: 8px;	// this will apply to Safari 3 and 4, iOS 1+ and Androis OS 1.5+
	border-radius: 8px;			// this will apply to Opera 10.5+, IE9, Safari 5+, Chrome and FireFox 4+
}

Now, this works but you may notice that if you have a background set on the block element you are applying the rounded corners to, the background will “spill” outside of the corners. In order to fix that, we can apply the background clipping rule to the element. So, our final CSS rule looks like this:

div#my-rounded-box
{
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box; 

}

Try it out and enjoy!

This entry was posted in CSS and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *