Sam Brown

Bulletproof Rounded Corners with Border Radius

#412 22nd December 2009 at 4am Notes

I was rather pleased to see that not only does the latest version of Opera (the 10.5 pre-alpha) support border-radius but they made the smart move and didn’t prefix it with a vendor specific property -o- like Gecko (-moz-) and Webkit (-webkit-) do.

If you have not already been writing your border-radius statements with progressive enhancement in mind, now is most definitely the time to do it:

  1. .box {
  2. -khtml-border-radius: 5px;
  3. -moz-border-radius: 5px;
  4. -webkit-border-radius: 5px;
  5. border-radius: 5px;
  6. }
  7. Download this code: /code/border-radius.txt

The latest Opera pre-alpha includes a whole host of new properties from the W3C’s CSS3 Backgrounds and Borders spec including background-clip, background-origin, border-radius, Multiple background images, background-attachment, box-shadow & border-image. This version also includes the ability to add CSS3 transitions and 2D transforms for richer user interfaces.

My delighters.css stylesheet now includes the Opera specific transitions and animations. Thumbs up to Opera.

Post a link to this on Twitter ↩

Comments

Andy Lobban 22 December 2009, 08:36 #1

If you want to be really complete you could also add

-khtml-border-radius: 5px;

Matt Brett 22 December 2009, 08:42 #2

I can’t find the resource at the moment, but I recall reading that it was better to leave the actually CSS spec declarations at the bottom of the list, and have your vendor specific declarations first.

Regardless, I really need to do something reading on some of the other CSS3 hotness that’s now supported in the leading browsers. Been using border-radius and text-shadow quite a bit these days, and it always feels like a treat when you can add a new trick to your bag.

Matt Wilcox 22 December 2009, 09:08 #3

Isn’t the order the wrong way around? Imagine FF4 supports border-radius without the moz prefix because the spec is finally solid, it’ll also support the moz implementation too. Which may not be the same implementation as the W3C one.

So for more bullet-proof future-looking enhancements the W3C version should be last in the list, so it overrides any quiffy browser-specific version of border-radius. Right?

Alberto Calvo 22 December 2009, 09:32 #4

Matt & Matt, you’re absolutely right. The vendor extensions should be on the top :)

Sam Brown 22 December 2009, 11:07 #5

As was quite rightly pointed out, I had the order wrong and for consistencies sake I have added Konqueror to the list as well. Thanks. :)

Neil Knauth 24 December 2009, 20:14 #6

I’m noticing that comments’ text is overflowing on the right-hand side (and being clipped off) in Mobile Safari. Is anyone else seeing this? Feature? Bug?

Anyhow, merry Christmas to you and yours!

kevadamson 4 January 2010, 04:22 #7

I get about 10 or so visitors a year from Konqueror users. Does anyone know if the browser is to be a likely force any time in the future? Is its user numbers growing?

I’m not overly keen on all these different prefixes – it means that a developer has 5 times or so more declarations than will be needed when the spec is finalised. So the fact that Opera has dropped – o – is helpful in that regard, but at the same time it’s useful to have some indication that a declaration is ‘in development’.

I proposed a single CSS testing prefix, but I’m unsure if it would be viable – a few think not.

kevadamson 4 January 2010, 04:47 #8

Also: Does anyone know which version is to be used in Opera, and even the final spec?:

“border-radius-topleft” or “border-top-left-radius”

Commenting has closed for this article. Feel free to me.

Hi, I'm a UI designer developer based in Edinburgh Scotland working as lead web designer at foursquare in NY.

• Dribbble • Endorse • Facebook • Flickr • foursquare • Twitter