Chrome’s border radius CSS feature

Just a note on how Chrome handles it’s rounded corners.

I found out about CSS3′s rounded corner support for Mozilla and Webkit browsers and happily started using it. Turns out though that Chrome currently doesn’t have the shorthand tag for it like Mozilla does – I’m sure it’s something they’re working on though (or maybe even just forgot).

What I mean is that whilst you can do this:

-moz-border-radius: 2px 2px 15px 15px;

For the radius to be applied clockwise starting from top-left, you can’t do that for Webkit at the moment. So you have to write it out long hand like:

-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;

It’s a tad annoying, but at least Chrome support it, unlike some browsers.

Update: Lots of people seem to be getting to this post via Google, but not staying for long. Comment with what you’re looking for, and I’ll update this post this better information (helping you, and other people that come along later). If you really want to say thanks, you could Flattr this!