border-radius

in

Found somewhere on the web...

Working with Border-radius

Although you could easily have missed it, in early March a healthy, new Opera release was delivered: 10.5.

Opera 10.5While it seemed that Opera had spent the last year or so focused on user experience -- the look and feel -- it felt like they were missing out on some of the cool new CSS3 gizmos going on at Mozilla and WebKit.

Happily, 10.5 finally seems to have delivered a little love to us designer/developers.

Some of the newest and grooviest additions for us front-end peeps include:

  • Full <strong>@font-face</strong> support
  • CSS3 transition and transform support
  • Full <strong>border-radius</strong> support

The last addition is the one I want to touch on briefly here. Of course, <a href="http://www.w3.org/TR/css3-background/#the-border-radius">border-radius</a> is the CSS property designed to let you take the sharp corners off your boxes, buttons, and blockquotes.

Mozilla and WebKit have both supported their own proprietary version of it for some time, and, strangely, Opera apparently did support border-radius in earlier versions, but withdrew it.

Whatever the reasoning behind that decision, it's back. Even more pleasingly, they've implemented the W3C standard for <strong>border-radius</strong>. Big props to Opera!

So, what does this mean in practical terms?

It means in 2010 we can now add rounded corners in all the well-mannered (read: non-IE) browsers in three short lines of code:

.rounded {
-webkit-border-radius: 9px;  /* safari-chrome */ 
 -moz-border-radius: 9px;   /* firefox */ 
 border-radius: 9px;  /* opera */ 
 }

Depending on the site, this could mean anything up to half your audience see your rounded corners. Obviously we're conveniently ignoring that gigantic blue elephant in the room.

In many situations, you may make the design decision to leave Internet Explorer to its squareness. It's a perfectly valid approach; however, if that's not a viable option for you, there's another possibility (of sorts).

Since the days of IE5, Microsoft browsers have supported a set of proprietary CSS doo-hickeys called HTML Components (or more commonly, HTCs), designed to let you apply extra behaviors to your CSS. These are rightly ignored by most people now, but they can offer help here.

Firstly, you'll need to download the <a href="http://code.google.com/p/curved-corner/downloads/detail?name=border-radius.htc">border-radius.htc</a> file from Google Code and place it in the same folder as your CSS.

Attach your HTC file to your CSS with the following code and test it in IE6, 7, and 8:

.rounded {
-webkit-border-radius: 9px;  /* safari-chrome */ 
 -moz-border-radius: 9px;   /* firefox */ 
 border-radius: 9px;  /* opera */ 
 behaviour:url(border-radius.htc);  
 /* IE hack */ 
 }

Internet Explorer should be rendering curvy corners.

Here's a little test I put together. The simplified rendering in IE should be fairly clear and demonstrate the concept well enough.

Border-radius demo

So, is there a catch?

As usual with IE, yes, there is:

  1. This HTC works by sneaking some of Microsoft's old VML vector language into the page. VML is old and crotchety and really resents being told what to do, so keeping it simple will always help. I've found <strong>position:relative</strong> is often your friend when working with VML.
  2. You'll notice in the demo in any IE there is no hover state detected on any object rendered with this HTC, though buttons and links are clickable.
  3. Trying to combine <strong>border-radius.htc</strong> with other crazy IE tricks (for example, PNG transparency, glows, shadows, transforms, and so on) is literally demanding trouble. 
  4. In the past, HTC usage has been linked to performance problems in IE. Always keep this in the back of your mind whenever you're using them.

As is often the case, there are currently no perfect solutions, but this hack may be just enough to get by on.

ie9 ?Meanwhile, as I write this Microsoft is delivering an Indepth look at Internet Explorer 9.0 at Mix10 in Las Vegas. They've also made an Internet Explorer 9.0 Platform Preview available.

Since the first IE9 whispers back in November, all the talk has been of radically faster JavaScript, and support for HTML5, CSS3 and SVG2.

Clearly this is in its very early stages (pre-alpha, if you like), but I can tell you that IE9 test-drive examples do use <strong>border-radius</strong> in its official W3C format.

Can we allow ourselves to dream?

Well, I want to, but we've all been burnt before ...

X
Loading