For those looking for rounded corners for their designs, there’s a lot of techniques throughout the ages, so to say. At first, web designers started with tables, and the only resource was to make several cells to contain rounded corners images. Pretty hideous but it does the trick.

Now, with CSS you can make rounded corners by using only CSS and no images. You may ask yourself “what is this wacko talking about?” since there’s no rounded corners properties in CSS nor CSS2. So the wacko gives you a warm welcome to the kingdom of… CSS3!

Before going further, CSS3 isn’t “oficially” alive, however, a bunch of the new CSS3 properties are available in most browsers, so it’s quite safe to use them (we’ll go further on how to display CSS sheets depending on browsers).

One of the most sough after properties for web designers is the rounded corners property, since it’s one of the main components of so called web 2.0 design (as we’re at it, after 20+ years as a designer, I still have no idea what web 2.0 design is)

So, without further ado, let’s start with the tutorial:

First let’s add a div with any content you may want:

    <div style="background:#f09; width:300px; padding:10px; -moz-border-radius: 0 0 10px 5px; -webkit-border-bottom-left-radius: 10px;

    -webkit-border-bottom-right-radius: 5px;



    -khtml-border-bottom-left-radius: 10px;



    -khtml-border-bottom-right-radius: 5px;



    border-bottom-left-radius: 10px;



    border-bottom-right-radius: 5px;">This is the almighty content</div>

Neat, huh? Unless you’re using a pseudo-browser, you should be seeing a pink box with all corners rounded. And this is the whole code used to create that

<div style="background:#f09;

width:300px;

padding:10px;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-khtml-border-radius: 5px;">

This is the almighty content

</div>

Let’s disect it: border-radius is the w3.org property, so if you want to validate your page, you’ll need it. Sincerely, as long as the design works, I couldn’t care less about validation. Most of the times, when you want to go “out of the box”, you’ll find a lot of trouble validating your CSS. But getting back to our subject, this property has propietary codes for different browsers, hence the remaining properties we have added

-moz-border-radius: it’s the Mozilla propietary implementation
-webkit-border-radius: it’s the Safari propietary implementation
-khtml-border-radius: it’s the Konqueror propietary implementation

Now, we’d bang our heads against the wall wondering why all these browsers can’t just use the w3.org implementation, but well, it’s the same old story. This being said, Opera and Mozilla announced their browsers will recognize all w3 implementations (Opera already does on most of them, including this one).

Now, what if we want different radii on different corners or even no radius on some corner? This will require slightly more code, but not that much. See it by yourself:
<div style="background:#f09; width:300px; padding:10px; -moz-border-radius: 0 0 10px 5px; -webkit-border-bottom-left-radius: 10px;-webkit-border-bottom-right-radius: 5px;border-bottom-left-radius: 10px;border-bottom-right-radius: 5px">This is the almighty content</div>
and the code to achieve this as follows:

<div style=”background:#f09; width:300px; padding:10px; -moz-border-radius: 0 0 10px 5px; -webkit-border-bottom-left-radius: 10px;<br />

-webkit-border-bottom-right-radius: 5px;<br />

-khtml-border-bottom-left-radius: 10px;<br />

-khtml-border-bottom-right-radius: 5px;<br />

border-bottom-left-radius: 10px;<br />

border-bottom-right-radius: 5px “>This is the almighty content</div>

As you can see, Firefox propietary implementation is more simple than all others since you can define all radii in a single declaration, where the radius values order is: top-left, top-right, bottom-left, bottom right. However, the w3 implementation is way more sophisticated, once all browsers recognize it, you’ll be able to do stuff like this:

So this is it, CSS corners for the masses!

Making CSS rounded borders in Internet Explorer

OK, first of all let’s clarify something:
a) IE is more a giant spyware machine with some browser capabilities than a real browser.
b) Most people uses IE.
c) Microsoft already announced they’ve no plans in the near future to be w3 compliant, much less CSS3 compliant.
hence d) you must work on an IE version like it or not.

Bummer. At this point, I’m all for letting IE users see the above boxes as simple squares, but well, we all know we want the design to be cross-browser compatible. There’s no way in hell or heaven that a compliant CSS2 layout will look the same in IE than in any other browser, so you need to do things different for IE. There are several ways, but the one I like is making a whole different style-sheet for IE7 and another for IE6. Nasty, but will save you a lot of time. To achieve this, you’ll need to add this code in your pages between the HEAD tags

<link href=”style.css” rel=”stylesheet” type=”text/css” media=”screen” />

<!–[if gte IE 6]>

<link rel=”stylesheet” type=”text/css” href=”style-IE.css” media=”screen” />

<![endif]–>
<!–[if gte IE 7]>

<link rel=”stylesheet” type=”text/css” href=”style-IE7.css” media=”screen” />

<![endif]–>

That means: “if Greater or Equal to IE6, use style-IE.css” and same for IE7 . Want to cry? Although more compliant, you’ll probably need yet another style sheet for IE8!!! Personally, I don’t care anymore for IE6, you can’t even test it anymore since almighty Microsoft stopped supporting it. Why would I?

but… you know what? I’ll leave you here and hopefully you’ll visit us to find out how to make the dreaded rounded corners in Internet Explorer!

Tags: CSS, rounded corners, tutorials, w3, XHTML