Standard:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */Individual Corners:
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;Shorthand:
-moz-border-radius: [top-left] [top-right] [bottom-right] [bottom-left]
-moz-border-radius: 10px 20px 30px 0;Elliptical Rounding (Firefox 3.5+):
-moz-border-radius-topleft: [horizontal radius] [vertical radius];
-moz-border-radius-topleft: 10px 40px;Elliptical Rounding Shorthand (Firefox 3.5+):
-moz-border-radius: [horizontal radius] / [vertical radius];
-moz-border-radius: 10px / 40px;-moz-border-radius: 10px 20px 30px 40px / 15px 30px 45px 60px;Above is the same as:
-moz-border-radius-topleft: 10px 15px;
-moz-border-radius-topright: 20px 30px;
-moz-border-radius-bottomright: 30px 45px;
-moz-border-radius-bottomleft: 40px 60px;WebKit Elliptical Rounding
All corners:
-webkit-border-radius: 36px 12px;Right corners only:
-webkit-border-top-right-radius: 50px 30px;
-webkit-border-bottom-right-radius: 50px 30px;
Thank you for including my additions. Some more additions:
Elliptical rounding:
-webkit-border-top-left-radius: 10px 40px;Elliptical rounding shorthand:
(notice: no slash)
-webkit-border-radius: 10px 40px;Thnk u,it helped me alot.How about opera browser.Will this work?
this is not compatible for IE browsers. Can u help me fix
I did not still get answers to my question. This code is not compatible for IE browers
All versions to date of IE don’t support any CSS3 so you will either have to just employ progressive enhancement (i.e. decent browsers get rounded corners IE does not) or use images and or javascript to round your corners.
@Prydie
He’s saying IE doesn’t do this. Because IE is a horrible waste of existence.
If people are using IE and want a better looking internet experience, that should be reason enough to upgrade to a current browser. And for the few people who physically cannot upgrade due to work restrictions, then they need to be doing work not looking for pretty websites.
As a community we need to stop spending valuable time catering to a browser that refuses to play nice with the rest of the group. Eventually they will get the hint and catch up or die off, either way the internet will improve.
Exactly what JC said. IE is that little kid eating paste in the back of the class room… Just leave him alone to do what he’s doing.
The sooner we stop catering to IE, the sooner Microsoft will start developing browsers which can keep up, or just stop developing them all together. Do what you can to get your content layout legible, and forget the design with IE because it’s a waste of time.
“IE is that little kid eating paste in the back of the class room.” That is just effin’ hilarious!! LMAO!
I disagree with saying that web designers need to stop catering to ugly browsers. I’m designing a site for a doctors office that caters to an age group that primarily uses IE. Just because their audience doesn’t choose a better browser doesn’t mean that I shouldn’t spend the time and effort to give them a well-designed product.
Is somebody still using IE???? Weirdos…
You can use PIE.js to get rounded corners in IE Browsers.
PIE currently adds full or partial support to IE 6 through 8 for the following CSS3 features:
1) border-radius
2) box-shadow
3) border-image
4) multiple background images
5) linear-gradient as background image
Opera doesn’t support border-radius yet either.
You can make it work by including CurvyCorners:
Then border-radius will also work in Opera and IE 4.0(!) and newer.
Thanks for the JavaScript succession, hope it will work in IE6 :)
I heared there is jQuery for teh same ??
so what is more preferred this or the image style
This (with or without CurvyCorners depending on the browsers you want to support).
Creating images for round corners is more work, more http requests and more bandwidth then using border-radius.
I really hate the rounded corner issue in IE and other browsers with a lack of descent CSS support.
Is there a nice and clean method that will work in all the browsers? Preferably a jQuery plugin?
Only problem is that the CSS will not validate at the W3C CSS Validation Service.
I think we’re beyond anybody really caring about validation as the CSS 2.1 spec has not even been properly supported. Ignore validation until then point where there is a definitive spec to actually validate against!
great and simple!
Is it true, that Firefox ignores rounded corners on images?
Can’t seem to get it to work.
Yes, firefox has no support for rounded corners on images, yet.
That said its very east to do in photoshop.
Or you could put the image inside a
<
div> and round the corners on that (overflow:hidden)
Safari requires more than shorthand if you want differing corner radii. You have to write out each unique corner.
To get rounded corners to work in IE 6-8 you need an htc file as a work around try this:
http://code.google.com/p/curved-corner/
Just download the file and follow the directions and you can integrate it with your current css solutions.
It can be a little wonky so follow ALL the suggestions and dl the zip file with an example in it if you need to.
This is the best solution. Thank you very much for sharing this.
A great way to generate rounded corners is border-radius.com.
It’s simple to use and generates the css for webkit and gecko proprietary extensions as well as the css3 version.
You can also set the value of each corner and it’ll spit that code out as well.
You can have a look as well at FlexiPanels CSS – a Dreamweaver extension that creates rounded corner CSS boxes without coding.
Hey, Opera 10.5+ and Internet Explorer 9.0+ fully supports border-radius!
Any way I hate IE…..
That’s not what I’m seeing here. IE v9.0.8112.16421 and still no curvy corners.
Fortunately I don’t use IE, I just check it for compatibility.
a noob question, with code like this just where in the css should a person put this type of code o make it work, in the body definition or elsewhere?
What would be the best method to implement rounded corners on nav items via CSS3, and have them work in IE as well? Progressive enhancement will not work, since the rounded corners will be for the nav items, and essential to design.
Should I just opt for image replacement for all browsers, or could I use CSS3 and then a specific style-sheet for IE using image replacement?
Thanks!
Thaaanks,,,
It has helped me a lot,,,
I tried using the images but i don’t like the use of it.
Thaaanks….
Thanks for another great snippet. This inspired me to care about other browsers a bit more.
Why can’t IE support this and make everyone’s life easier? I hate having to style something then figure out how to fix it in IE!! People, use firefox instead to make things easier on designers :)
the -khtml is missing, with it you can have rounded corners everywhere except IE, who does not deserve it!
http://it-things.com/index.php/2011/03/pure-css-rounded-corners-no-images/
Awesome articles and blog theme.
It’s is my first time to your blog,Fantastic post! You’ve created various quite helpful statements and I appreciate the time you’ve taken within your producing. It’s clear to see that you purely have an understanding of what you are speaking about. I’m researching onward to studying a lot more of your websites website content. Thank you!
Yes this Pure CSS rounded corners but the major issue is with Internet Explorer 6, 7 and 8. This is why this is a headache to web designers often. But some people have just written an htc file on javascript which can be linked in just as you put background image. just put that htc file in place of background image. This will work on IE too.
Here is the way to do
.rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
behavior: url(border-radius.htc);
}
This method works most of time…but some webhosts may not supports htc. But its not fault of this method, its webhosts. But majority of people can now create rounded corner in pure CSS with cross browser compatibility.
Ooops i forgot something on my old comment.
Use this path instead because border-radius.htc works bit differently than images.
behavior: behavior: url(/css/border-radius.htc);
You should also not forget that any thing with border-radius.htc you should put position: relative.unless there is already a position.
and for best result use same border radius to all corners.
and never use border-radius.htc with another IE hack.
IE will have to adapt the rules of css3 otherwise they will be wiped out by other browsers. excellent article. thanks.
Does it support on hover rounded corners. thanks
Check this URL below. this solves the problem with ie in connection to this article.
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
cheers!
“border-radius.htc” helps to set border radius for div in IE, but I want to set border radius for images in IE
Just adding my two cents on the let’s stop catering for the little guy in the corner. That’s IE in case you missed the comments about it.
Moving the web forward and stop wasting valuable finite time.
Yeah IE bashing is my favorite passtime too. But as webdesigners you all should also get off your high horses quickly.
My company develops a webshop for a certain b2b branch where IE7 and IE8 are still the most widely used browsers among companies and shops ordering from this webshop.
These end-users mostly can’t even update to IE9 due to WinXP or lack of administrative rights. Getting these end-users to install FF or Chrome is up to our customer, ie the webshop-owner, and it has proved difficult. Many end-users are web- and computer illiterates basically.
We dropped IE6 support last year, and are starting to only support IE7 in basic ways (no alt. css for rounded corners, they can have their divs, inputs and buttons fair and ‘especially’ square). IE8 will still be with us for years to come however. And IE9 doesn’t support css3 gradients for shit too.
Often we don’t have much of a choice when our customers want to make money from our carefully designed web products… Money makes the world go round remember!
it vl not work in IE browswers
so please provide a code for rounded corners should also work in IE
Just use <—< or <–< this will do the trick
Just use !DOCTYPE html or meta http-equiv=”X-UA-Compatible” content=”IE=edge” this will do the trick
Hey, didn’t worked on the template of my wordpress blog. Please tell me what to do.
The only think IE is good for is download Google Chrome & Firefox, so you can actually use and experience the internet ;-)
Thank you, the roundered corners worked perfectly!
Thank you for the great tutorial.
Is border-radius now the standard that is supported across browsers? Somehow the code given in the tutorial did not work for me in Firefox but when I try border-radius it works for me!
Thanks anyways for the tip.
Wonderfull and nice tutorial. it help me a lot to rememebr short code
border-radius: top right bottom left ;
Thank u sir
thanks a lotssssssssssssssssssssssssssssssssssss
i learn a lots from your webiste of css. i have a request can you please make a tutorial of mobile css
Hello sir,
How it is possible to the the given code,
<html>
<head>
<style type=’text/css’>
ul li a {
width: 100px;
display: block;
text-decoration: none;
-moz-box-shadow: 2px 2px 4px #888;
-moz-border-radius-right: 10px;
}
ul li a:hover {
background: #ebebeb ;
color: #67a5cd;
padding: 7px 15px 7px 30px;
}
</style>
</head>
</body>
<ul >
<li><a href=”#”>nidhi</a></li>
<li><a href=”#”>C++</a></li>
</ul>
</body>
</html>
Dear Nidhi, do let me know which kind Navigation do u want
Horizonta or Vertical
I need border radius for ie-7 to above pls help me
Thank you for this tutorial, but we need one for Internet Explorer 7 and 8 if possible :) could you help please?!
Thanks
Quran
This tutorial are really helpful. Thanks a lot!
Some really inane and juvenile comments her in regards to IE. Explorer is still the main choice browser for most enterprise level web sites and applications. To dismiss it in such a fashion is an indication of naivete. If I were to turn up at a meeting with one of my major clients, a multinational news agency, and inform them that they can’t have what they want unless they change to a “decent” browser they would terminate my contract and go to a grownup resource who could supply a design and development solution to suit their incumbent enterprise-wide software choices be that IE7 or any other browser solution.
I love this site for it’s insights and helpfulness but I wonder if some of these commentators have ever had work in the real world.
in your parallel universe i guess.
Browser stats say it all. Also the actual numbers of IE users are lesser than the stats 4 various reasons. IF IE was not installed with the OS no one wud ever use it.
I refused my client support on IE, I challenged them to find anyone who could maintain the design and also make it work in IE 5, 6 and pixel perfect in 7 without javascript(which many a time is disabled for many users who use lower than 7 cause they are too dumb to upgrade the OS and they set the security high to make up for and that disables javascript)
I forgot to mention why i refused they wanted IE compatiblity without paying extra. I can make anything compatible use javascript or load a dedicated style sheet for each version of IE but you gotta pay me.
no company will pay you for that, its only when you speak money they decide to let it go.
The only juvenile is you, I think ur either offering IE compatibility for free or u must be making very simple text and graphic websites in front page
Anyone who tells multi-national enterprise level clients they won’t support their IE base is removing themselves from the world of enterprise level development. They can stick to local fishmonger and beauty consultant sites and leave the arena for professionals who deal in multi-device, multi-platform online presence. Just my two cents.
@Creem – As proven. Naive and juvenile.
If you don’t have the skillset to support all browsers you are only half a craftsman.
If your clients are not willing to pay you have the wrong clients.
If your clients are prepared to be dictated to by a web developer neither of you are serious in your endeavours.
My business has a major international news agency client with employees in excess of 15,000 desks using Sharepoint backend, IE browsing and cloud applications. Do you have the slightest clue how much it would cost them to change their system in both monetary terms and disruptive upheaval because the web guy doesn’t support it?
You might not like the term “naive” but we are what we do.
this is not working in ie8
great tut
Hi,
We are developing Java Application with angularjs. Rounded corners are not working in IE8, I used PIE.htc , that time some dynamic data is not working its showing errors in a page, i think the problem is angularjs. also rounded corners are not working in dynamic content div’s. in static content div’s are working rounded in iE also.
Can you help on this issue.
Thanks & Regards,
Sanjeeva