CSS3 Rounded Corners

Jan 14, 2010 by Matt | Posted in Design 2 Comments

Want to round the corners of an element without messing around with images and tricky CSS? You can do it with pure CSS, but, of course, it won’t work in Internet Explorer. (Or Opera, for that matter.) Fortunately, the effect devolves gracefully.

As an example, to round the corners of a button by 6px:

#myButton {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

The first property is for Firefox and other Mozilla browsers, the second is for WebKit browsers like Safari and Chrome, and the third is for future browsers that actually support the official property that will be part of the CSS3 standard. (IE9, oddly enough, is rumored to eventually support this.)

Need to round just one corner?

-moz-border-radius-topleft: 6px;
-webkit-border-top-left-radius: 6px;
border-top-left-radius: 6px;
  • http://www.employeratlas.com Eric Di Bari

    I love these rounded corner solutions for Firefox and Safari, they really save a lot of time. Too bad IE has yet to implement anything…

    • http://www.webmaster-source.com Matt

      I remember hearing that IE9 has support for the straight border-radius property planned. So long as they follow the spec properly (and you will this time, won’t you, Microsoft…?) it should be available to some IE users within the next couple of years.

      I’m hoping the Mozilla and WebKit developers will implement the actual property by then as well, instead of relying on the “demo properties” with the -moz and -webkit prefixes.