Easy Cross-Browser CSS3 Rounded Corners

One of the most useful of CSS3’s features, in my opinion, is rounded corners. By simply adding a quick line of style to any element, you can take a fairly boring design and “bring it to life”. Before the advent of CSS3, this was a bit painstaking to do using a background image.

Here’s how to do it

Add this to your CSS. (change .rounder-corners to whatever element, div, class, etc. you’re applying it to)

.rounded-corners {
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  border-radius: 10px; /* universal */
}

Make it work in IE

But of course Microsoft wouldn’t make things that easy for you. border-radius by itself isn’t supported any version of Internet Explorer older than 9. But thanks to coding genius Remiz Rahnas, there is a fix. Head over and download the hack.

http://curved-corner.googlecode.com/files/border-radius.htc

Now upload that file to your server and paste in this code below the above code. (change the path to your site and whatever directory you put it in, of course)

behavior: url(http://example.com/files/border-radius.htc); /* IE */

Apply it to select corners

In case you only wanted some corners rounded, and others the regular square look, there’s a command for that too. Instead of using the first set of code, use one or more of these lines of CSS to make only certain specified corners round.

Universal:

border-top-right-radius:
border-top-left-radius:
border-bottom-right-radius:
border-bottom-left-radius:

Safari and Chrome:

-webkit-border-top-right-radius:
-webkit-border-top-left-radius:
-webkit-border-bottom-right-radius:
-webkit-border-bottom-left-radius:

Firefox:

-moz-border-radius-topright:
-moz-border-radius-topleft:
-moz-border-radius-bottomright:
-moz-border-radius-bottomleft:

Compatible with Internet Explorer, Firefox, Safari, Chrome, and Opera.

Get this delivered to your inbox!

It's quick, free, and painless.

Comments

  1. Were I concerned with pleasing IE users, I’d definitely check out that code. Thanks for the resource! 🙂

    Just one question. Since border-radius applies to (almost) all browsers, why mention the Safari, Chrome, and Firefox specifics? I mean, your picture “border-radius: 5px;” works in every browser

  2. Thx for sharing that informations! A lot people think that the syntax for all the browsers is same, but they aren’t similar!

  3. testtoabc says:

    I am trying to do something on round border with css property which link http://www.webinbangla.com/2012/05/css-round-shape/

  4. Outstanding I’ve been utilizing this short article

  5. Thank you so much, very helpful. The IE fix is a great resource as well.

    Best,
    Shane

  6. Fantastic goods from you, man. I’ve understand your stuff previous to and you’re just extremely excellent.
    I really like what you have acquired here, certainly like what you
    are saying and the way in which you say it.
    You make it enjoyable and you still take care of to keep it
    wise. I can’t wait to read far more from you. This is actually a wonderful web site.

  7. Great article. Just what I was looking for !
    Nice job.

Leave a Reply to Webdesign Blog Cancel reply

*