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.
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
I know what you mean, I’m always trying to get people off of IE, (http://www.danielshamburger.com/no-ie.html) but still, it’s like 40% of everybody on the web. (http://gs.statcounter.com/)
That’s a good question, and I’m not completely sure of the answer, but I think it just has to do with ensuring complete compatibility. Everybody says to do it, so I just go along. 😉
And by the way, that’s an image, so it’ll work in anything. Perhaps I should have done a demo.
Thx for sharing that informations! A lot people think that the syntax for all the browsers is same, but they aren’t similar!
Your welcome! Thanks for stopping by. 😉
I am trying to do something on round border with css property which link http://www.webinbangla.com/2012/05/css-round-shape/
Outstanding I’ve been utilizing this short article
Thank you so much, very helpful. The IE fix is a great resource as well.
Best,
Shane
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.
Hello, of course this paragraph is actually nice and I have learned lot of things from it about blogging.
thanks.