As many of you already know that the upcoming CSS 3 allows for rounded corners to be implemented with the “border-radius” property. Here I want to demostrate the use of this property and which current browsers supports it.

I am sure most of you had one time or another created the rounded corner effect on your web designs. Then you would have already know that it is a rather tedious work. I am not going into the specifics of how we have done it in the past but rather how we are doing it now and in the future.

Introducing Border-Radius!

Ok, maybe this property isn’t exact new news, infact some browsers have been testing it for awhile now but the future looks bright!

Let me demostrate how this property works, have a look at the code.

HTML:

  <div id="wrapper">
  	<div id="header">
		<div id="box">
        	<img src="images/twitter.jpg" width="268" width="268" alt="Twitter Bird" />
        </div><!--close box-->
    </div><!--close header-->
  </div><!--close wrapper-->

CSS:

html, body {
	margin:0;
	padding:0;
}
#wrapper {
	margin:0 auto;
	width:960px;
}
#box {
	padding:15px;
	background:#78B937;
	width:298px;
	margin:20px auto;
	text-align:center;
	border-radius:5px;
}

The above code will generate this:

What gives, I put the border-radius property and it still does not look one bit rounded…..As it turns out there are vendor specific extensions you need to use in order to get the border-radius property working. Remember I mentioned that several browsers have been testing it for awhile now? Well they were testing it with the following vendor specific extensions.

As you have probably already noticed that our ugly step child AKA Internet Explorer isn’t on this list therefore it is not supported period. I am crossing my fingers that the next version of IE will support it. Using these prefixes, the browsers are able to render the rounded corners we want.

This is how its done. In your CSS, add these lines to the box div.

CSS:

#box {
	padding:15px;
	background:#78B937;
	width:298px;
	margin:20px auto;
	text-align:center;
	border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
}

You will notice that I did not take out the “border-radius” property even though it is not currently working. By doing this I can future proof this property when browsers start to “officially” support it.

With the vendor specific prefixes, we are able to get this result.

The Fun Has Just Begun!

Now that you know how to add a rounded corners to a box, but did you know that you don’t have to round ALL four corners? That’s right, the border-radius property can actually round whichever corner you so choose allowing for complete flexibility of your design. Here are the other syntax that makes it possible.

CSS:

#box {
	padding:15px;
	background:#78B937;
	width:298px;
	margin:20px auto;
	text-align:center;
	border-bottom-left-radius:20px;
	-moz-border-radius-bottomleft:20px;
	-webkit-border-bottom-left-radius:20px;
}

With the above syntax, you will see this result:

You may have also noticed I didn’t use the Opera specific prefix and that is because I was not able to get it to work with the latest version of Opera. It might of worked for previous versions though.

Armed with this knowledge, you can have some fun!