greenideas

Hey, you know what can be a real pain in the tail? CSS rounded cor­ners. Of course there are battle-tested, work­horse solu­tions out there, like slid­ing doors, or a hand­ful of Javascript-based alter­na­tives. But rounded cor­ners are such a com­mon ele­ment of web design and seem like a nat­ural exten­sion of the designer’s exist­ing toolkit that it only makes sense that there should be a way to imple­ment them with pure CSS. The good news is that border-radius is indeed com­ing in CSS3. The bet­ter news is that you can start using it today, as long as you’re only tar­get­ing Gecko & Webkit. Before we get to that though, let’s look at the way it’s sup­posed to work accord­ing to the spec.

As you might expect, the border-radius prop­erty is used a lot like border. That is, you can spec­ify one value for each cor­ner (border-radius: 10px;), one value per cor­ner (border-radius: 1px 2px 3px 4px;), or val­ues for oppo­site cor­ners (border-radius: 5px 10px). It actu­ally gets more com­pli­cated, since in addi­tion to describ­ing cor­ners with one radius (i.e. those with semi-circular curves), you can make ellip­ti­cally rounded cor­ners by nam­ing two radii. For more detail on this, take a look at the draft spec. Lastly, you can use a prop­erty for each cor­ner, border-top-left-radius: 2em;, etc. So, assum­ing there aren’t any major changes in the spec, expect this to be what gets imple­mented as part of CSS3, and what you’ll ulti­mately using in your code.

But what about now? Here? Today? It hap­pens that two of the standards-aware, forward-thinking ren­der­ing engines have devel­oped pro­pri­etary exten­sions to CSS that should stand in for border-radius until cer­tain ambi­gu­i­ties in the spec can be resolved, and the prop­erty is implented accord­ing to the stan­dard. So if you want to use border-radius in your code today, you’ll have to use both the Mozilla– and Webkit-specific CSS prop­er­ties. For­tu­nately, both of the pro­pri­etary exten­sions work in the cur­rent major releases of their respec­tive browsers.

If you’re mak­ing a box with four cor­ners of the same radius, the syn­tax is the same in Mozilla and Webkit:

-moz-border-radius: 10px; /* 4 corners of radius = 4px*/
-webkit-border-radius: 10px; /* Same as Mozilla */

To spec­ify dif­fer­ent radii for each cor­ner, things diverge somewhat.

/* Mozilla: */
-moz-border-radius: 1px 2px 3px 4px;
/* Webkit:
    (The four declarations below amount to the
    same thing as the single rule above) */
-webkit-border-top-left-radius: 1px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 4px;

And that’s the guts of it. So to make a tabbed nav­i­ga­tion list, you would use a dec­la­ra­tion along the lines of the fol­low­ing (and see the below code in action.):

li {
  border: 1px solid #587402;
  border-bottom: none;
  border-radius: 0 10px 0 10px;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  list-style-type: none;
  float: left;
  padding: .5em 1em 0 1em;
}

There you have it. But there are just a cou­ple of other things I want to point out. If the con­tainer you’re round­ing the cor­ners of has only text con­tent and a back­ground in it, the back­ground will clip to the rounded cor­ners. And indeed, accord­ing to the spec, any the con­tents of a block-level ele­ment on which a border-radius is set should clip do the same as long as you set overflow: hidden on those con­tents. How­ever, the imple­men­ta­tions just aren’t there yet. Instead, with any­thing over and above plain HTML text (for instance, an img or iframe) inside such a con­tainer, the square cor­ners will peek out­side of the rounded con­tainer. (Exam­ple)

One solu­tion would be to make the bor­der thick enough that the cor­ners of the inner ele­ment can’t poke through the outer bor­der (like so). Though inel­e­gant, this will work just fine if you don’t need every­thing to round nicely. And this method should suf­fice for what­ever kind of con­tent you’re try­ing to stuff into your nicely rounded box.

How­ever, if it’s an image you’re putting in the box and you need the inner cor­ners to be rounded as well as the outer cor­ners, then the only answer (for now) is to set the image as a back­ground. Still, if the lan­guage of the spec is any indi­ca­tion, it won’t always be this way.

For the poor soul who is try­ing to squeeze iframe con­tent into a rounded cor­ner box, you’re essen­tially out of luck at the moment. You can cer­tainly use the thick bor­der method I described above, but short of that, you’ll have to look to the bleed­ing edge. That is to say, you’ll need some­thing which isn’t yet in any production-quality browser, but that is cur­rently in the Webkit nightlies. I speak of the arcane meth­ods of -webkit-mask-image. This prop­erty can take a png or an svg as its url, and pretty much any­thing you apply it to will play nice and clip to the shape of the image. See for your­self. Still, this last bit is obvi­ously not any­thing any­body will be using in pro­duc­tion code for some time to come.

After read­ing all of this, if noth­ing else, I do hope that you’ve come away with a bet­ter idea of some of the great things that the CSS work­ing group has in store for you, the devel­oper. But even moreso, hope­fully there’s some­thing in all of this mess that you’ll be able to put to use today.