Look! I have round corners!


CSS only rounded corners

Here's a nice trick you can use with your style sheets to create rounded corners on a whole slew of elements such as tables, images, link backgrounds, and more. The real benefit here is that you do not have to rely on Javascript, a bunch more images, and slower loading times... at least not for standards-based browsers. And, I am happy to report that Microsoft's latest browser version, IE9, displays these just fine. For older versions of IE and other non compliant browsers, you should see a reasonable degradation to the familiar old square corners. Best, CSS lets you easily change radius sizes with just a few clicks and number changes. Ready to dive in? Let's go!

The following techniques will work with IE9, Safari, Mozilla-based, and Webkit-based browsers. The CSS styles can be applied either locally (inline) or using an external stylesheet. Though it is usually recommended to avoid inline CSS styles these days, you can create some unique looks by applying these features selectively to your project. Let's look at some code:

<td valign="top" colspan="2" bgcolor="#111111" style="border-radius: 15px 15px 15px 15px; -moz-border-radius: 15px 15px 15px 15px; -webkit-border-radius: 15px 15px 15px 15px">

The "moz" and "webkit" talks to browsers like Firefox and Chrome, each recognizing the "border-radius" HTML function. Safari recognizes the border-radius function without being specifically addressed to the browser. Interestingly, aside from the bickering between Opera and Microsoft and Apple and Microsoft, they have apparently agreed on the same command for rounded corners. This means we do not need browser specific code for these three (Just think, we still do need to use "-o-" for some properties we need Opera to recognize. What a pain this is when we need to address the same code in four browser types! Still, it is easier than the old days of lots of work-arounds to get IE6 to work right.

Using this technique in your style sheet looks like this instead:

content td {
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;

Do some experimentation with the corner radius sizes by changing the 15px to something else, larger or smaller. Have some fun with it. And, remember, you can also apply this technique to other elements besides just table borders. Try this with an image ("img") border or even a DIV. I know this does not help those looking for answers for earlier versions of IE. For that, you will likely look to solutions that use images and a bit of Javascript. Good luck!

Back to Tutorials

If you liked this tutorial, consider a donation. Thanks!