Recently I wrote an article on CSS3: Rounded CSS Corners, which is a great solution for creating rounded corners. However, Internet Explorer doesn’t yet support it, but there is a solution which this article explains.
The following two links demonstrate a working version and also a zip file so you can download everything you need to get this working.
The HTML is pretty straight forward and uses the code from another article – HTML5 tutorial: Getting Started.
In order to get the rounded corners working in IE you’ll need JQuery and the JQuery corner script both of which are included in the above zip file which I’ve then referenced from the HTML.
<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery.corner.js"></script>
Next you’ll simply need to tell the browser which corners you want to be rounded.
<script>
$("#container").corner();
$("section").corner();
$("aside").corner();
$("#main-navigation a").corner("top 5px");
</script>
If you’re familiar with CSS at all then you should be able to easily see how this is applied using JavaScript as we’re simply using the element, ID or class within the quotes to target that part of the HTML.
Summary
And that’s all there is to it. You can create all kinds of rounded corner effects as shown on the rounded corners demo site. Up until now, I’ve always created rounded corners using this method but seeing the simplicity of this Jquery solution, I am tempted to switch for Internet Explorer at least and rely on CSS3 for Webkit and Mozilla browsers.
What do you think? Are you still using images for rounded corner solutions or are the JavaScript and CSS3 methods becoming much more wide spread in the development community?
Chris Coppenbarger
2 years ago
Just a note that the corners script pulls the background color from the topmost parent div that has a background color.
See the front page of http://www.ciu.edu in IE for an example of how this solution still doesn’t always work in IE. It’s the gallery at the top.
Dave
2 years ago
Thanks for the info Chris… I agree it’s probably not the solution for every eventuality and that for opacity you may need further JavaScript or revert back to using graphics but for simple rounded corners it’s definitely worth considering.
Jermayn
2 years ago
I am toying with the idea to use this for our current redesign of a site which already has the CS3 method.
Iain
2 years ago
The zip is empty when i download it…?
Dave Woods
1 year ago
Hi Iain, Sorry about that, the zip file and link should now be working again.
sssss
1 year ago
thx worked in IE but not support border radius plz advice
Dave Woods
1 year ago
@sssss – Border radius isn’t supported by IE which is why you’ll need to use the jQuery method above if you want to create rounded corners in IE (without using images).
If you’d rather not use JavaScript then may I suggest the following method: http://www.dave-woods.co.uk/index.php/css-rounded-corners-revisited/
Szalonna
1 year ago
Hi
I would add Opera support as:
var opera = $.brower.opera && $.brower.version >=9;
…
$.fn.uncorner = function() {
if (moz || webkit || opera) return;
this.css(moz ? ‘-moz-border-radius’ : ( webkit ? ‘-webkit-border-radius’ : ‘border-radius’, 0) , 0);
$(‘div.jquery-corner’, this).remove();
return this;
};
Rest of the Best: for November 2 2009 « Basic Web Design
1 year ago
[...] Bloggers » (Specky Boy) 31 Creative Uses of Typography in Web Design » (Designm.ag) Rounded Corners in Internet Explorer » (Dave Woods) 55 Extremely Useful Online Generators for Designers » (Balkhis.com) Best [...]
Rest of the Best: for November 2 2009 - Everything You Need - Basic Web Design
1 year ago
[...] Bloggers » (Specky Boy) 31 Creative Uses of Typography in Web Design » (Designm.ag) Rounded Corners in Internet Explorer » (Dave Woods) 55 Extremely Useful Online Generators for Designers » (Balkhis.com) Best [...]
osman
1 year ago
…Great help. Thanks Dave..
Cristian Dorobantescu
1 year ago
What do you think about Flexi Panels CSS – the Dreamweaver extension that creates rounded corner css boxes without coding?
Dave Woods
1 year ago
Hi Cristian, I’ve never used Flexi Panels to be honest. They might be good for people without CSS knowledge but I imagine that they may generate more HTML code than is really required so I’d personally rather create any layout myself than rely on a plugin to generate HTML/CSS for me.
Meir
1 year ago
This solution worked quite well, and should for most of my applications. Thanks very much!
rendra
12 months ago
After googling up… this is the easiest way, i think
Thanks dave for this tutorial…..
and Szalonna for adding opera compability…
this article very well explanation for beginner like me
Sorry for my english…
Rest of the Best: for November 2 2009 | Web Design Feed
12 months ago
[...] Bloggers » (Specky Boy) 31 Creative Uses of Typography in Web Design » (Designm.ag) Rounded Corners in Internet Explorer » (Dave Woods) 55 Extremely Useful Online Generators for Designers » (Balkhis.com) Best [...]
seok-lawrence
11 months ago
nice tip im going to use it on my re-design, finally the need to have images for borders could be over….oh joy!!
RobotPeter
11 months ago
I think CSS with images is still the best cross-browser implementation.
Harris
9 months ago
Since I can’t wait for IE 9 and border-radius this scripting was just the ticket!
Drew
8 months ago
WOW this is really cool! it has solved so many issues. I was wondering though, does anyone else see a square boarder in IE?
Anyways great job!
Introducing IE Wang: there’s your rounded corners | Jack's Journal
7 months ago
[...] like rounded corners, clients use IE. Use CSS3 then drop in this jQuery for IE http://bit.ly/cL0Oy (thanks [...]
Fabio
1 month ago
it works well with IDs, but doesn’t work at all with classes
Fabio
1 month ago
sorry about the previous message. For some strange reason, an element using classes was affecting the outcome somehow. Now I see it work when I don’t use teh dot before teh class definition for that element only, but I need the dot for all the remaining elements. And the border applied by CSS is killed. Also, there are some bg issues. It seems liek it works fine when using images for bg, but when using colors it doesn’t work at all