Rounded Corners in Internet Explorer

I’m not even going to look at the JS, but I will assume that this applies the table method in IE. Where it makes a table with bordering rows / columns, containing transparent cells that make it rounded. A correct assumption?

Is there an equivalent method for jQuery?

I have the problem on applying padding and embedding multiple rounded corners in i.e, stops allying the inner rounded corners .

So I can just amend the

[code]
$$('.round').each(function(rd) {
curvyCorners(settings,rd);
});
[/code]

to
[code]
$('.round').each(function(rd) {
curvyCorners(settings,rd);
});
[/code]

Also useful for Opera, isn’t it? I’m used to SVG to accomplish it in Opera, but that still doesn’t work for IE (which is the point of your article).

Very nice! I’ve been wondering about “Rounded Corners in Internet Explorer” lately. Do you have any thoughts about Rounded Corners in Mozilla Firefox?

simple include the file, and it does all the work. brilliant. worked great.

Why would someone write stuff like this.. Brilliant.
Haven’t tested it yet, but does it also word on styling just 1 border?
So if you use things like:

-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;

-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;

@Rene: Did you only read the title of the post? :P That’s what those settings are all about “tl, tr …” top left, top right, etc.

I imagine it can auto detect that stuff too just like it auto detects the styles in the first place.

Nice! BUT… just had a look at the generated code in the IE Developer Toolbar.. there’s hundreds and hundreds of DIVs been generated there, a lot of them with IE filter styles. This can’t be great for performance?

My rule of thumb. Use extended features for WebKit & FireFox.. leave the other browsers display is as is, without the fancy styling. In the end, users will switch to browser they like the most…

Thanks much for this!

Shouldn’t we just ignore IE cssroundedcornersfail and accept the lack of CSS3 support? All that JS! In that way people will never understand the difference in browser quality…

As from 2.0.x, CurvyCorners allows you to put rounded corners on your page elements using CSS. No need for javascript.

My eyes!!! It´s burning >.< damn, shouldn´t have looked at the generated code. It´s so fubar.

from my vast experience with many “round corners” making scripts,
DD_Roundies is the best solution.

http://www.dillerdesign.com/experiment/DD_roundies/#nogo

I’ve used curvey corners for IE and I like it. Though the main problem I have is when you rounding a corner on a container you want to be clickable then any JS rounded corner fix messes things up.
I’ve seen a tutorial for Opera rounded corners that used SVG and I’m wondering if maybe something similar could be used for IE (i think it uses VML not SVG mind you).

I agree with vsync, DD_roundies, work very awesome. Not sure if its the fact that they have been around a while or not. Bonus of DD_roundies, that the library fixes transparent PNG loading in IE, and seems to be fastest one around.

IMHO if IE can’t handle rounded corners – then I don’t see why we should be cluttering up the code and spending any extra time.

Like anything – this technique will be handy in the real world where some clients will insist on rounded corners in all browsers. Then it is balance between using this technique and any other that there may be floating around.

Good work. But not sure I’ll be using it anytime soon – unless I really need to.

I agree with oliver and anders, the code is a bit frightening. I was trying to use this library for a javascript web app, which it used to generate about four or so rounded containers and maybe 10 or so rounded buttons. The performance got pretty laggy with all that extra code getting injected. If you’re going to use it for just a few containers, it’s great, but any more than that I would just use PNG images and a PNG-fix script for IE.

This is something which I was Looking for a long time.
Thanks buddy for posting this, I usally dont search, but I did — I found this. Extremely Happy.

Agreed, DD_Roundies is the best solution out there. Don’t even bother playing around with any other scripts.

please don’t use this!!
use standard CSS for standard compliant browsers, let IE fail (it’ll just display square corners).

Rounded corners are trivial and don’t justify kilobytes of javascript or absurdly complex markup and slow-down performance.

Great tip, I will be implementing this solution on one of my projects this week!

@David Walsh: “Let IE Fail”…that’s ridiculous.
If you HAVE to use rounded corners, using background images still seems more reasonable to me, both from page-load performance and markup coherence stand-points.
But if the “solution” is to load hundreds of lines of javascript code that generates absurd html markup, I would much rather try to deliver web layouts that avoid using rounded corners and don’t sacrifice meaningful markup.

I just hope web designers don’t start implementing this “solution” all over the place without considering the draw-backs, because they are huge.

@olivier refalo: you will loose clients with that rule of thumb!

In my opinion applying JS for styling is just not right. Performance is very important in big sites! Of course if you are developing a site for your little sister then you dot think too much about pixel perfect and cross browsers implementation problems..but talking seriously, this is not the way to go! not JS or behaviors for CSS! they just slow down the loading of your site.

Reading this conversation, I am really surprised. Think about it, if you want to let IE fail then doesn’t that include not caring about performance in it? If your site loads a tad slower with this script in IE, then hell let it be. Even though JS shouldn’t be used for styling, it SHOULD be used for fixing stuff for older/non-standard browsers. There are many like HTML5 Shiv, PNG Fixes, etc so I don’t really see a problem with this one.

Personally, I would put this within conditional tags for IE, and use php for opera detection. This way modern browsers would not suffer for IE/Opera.

Wow this is cool. I just hope this js won’t eat up the users pc resources. I have a pretty cool design on one of my websites but in IE looks like a shit only because of the inexistent rounded corners (yep I was little bit lazy to create that rounded img).

I’m going to stick with the traditional use of images until CSS3 is fully supported, may I also like to add that what if javascript was disabled? Alot of people browse with it turned off, images in my opinion seems tidier and works for everyone.

Unfortunately, when this webpage was loading, the corners were straight for a while. I cannot use that…

Dave, first of all, great site. For not being a designer you’ve done good work here.

Question 1: Do you think it’s possible to create a gradient background within these rounded corners?

Question 2: I’ve searched through your site, and I cannot figure out if you’ve explained what you use to create your section tabs interface.

But man, great site, amazing information.

You are my hero, I’ve spent a day looking for a solution that works in IE and there are dozens out there. Most involving tons of additional divs, images, even hacked about with jQuery.

I was at the point of just using the border radius and ignoring IE users when I found this post. Brilliant, elegant, clean and simple.

Hi, what i don’t like with these corner that it only load after the page have fully loaded, if a page is slow to load these corner will not appear.

@gino: This is because with DOM the elements that will be styled by JS need to be rendered on page before it can affect them. You’d need to hide the page content first, then after the corners are in place reshow the page contents (a whitewash effect)… or wait for IE9.

This is great, but how do I turn off the css auto-detect? I only wish to apply it manually to a couple of core areas in IE …

“Don’t let Internet Explorer’s refusal to implement rounded corners via CSS keep your websites from being as dynamic as possible!”

This is the stupidest thing I’ve ever heard. Please tell me how rounded corners makes a site “dynamic”?

@David Walsh: thanks

its very nice and help.

canu send me diffarent sahdes, and text grdiant and grediant effect

Thanks

sandeep

@David Walsh: I agree there are times when a client will insist on a consistent look through out all browsers.

However….

@sebastien brault: the developer in me agrees with you, I would like nothing more than for IE to fail OR get their act together.

Seems like I have been waiting for them to get their act together for a long time not sure if it will ever happen, so now failure would be nice. IE8 is a huge improvement, but they are already getting behind as more and more of us are push html5 coding into the limelight…

I like this JS you created, but it seems so heavy when loaded in IE browser. Good effort though, but I rather use rounded image..that way it will load faster and design wise it looks neat and clean.

Interesting posts. If you’ll forgive the plug, I generated my own approach to IE-friendly curvy corners using a mix of JS and PHP GD. Here’s the project – it’s free, I don’t get any more for it, just sharing it. Cheers.

http://mitya.co.uk/scripts/curveMe—cross-browser-curvy-corners-107

Honestly, You’ve got the best website I’ve ever seen in my whole career. Your tutorials are stunning. I really want to thank you for all your help. I really appreciate this.

This works great for me, with one exception – gradient background – which breaks when I use this script.

I’m using a filter to get a background gradient in the same element I want rounded corners, and I’m getting a blue solid background when I implement the script.

Any suggestions?

@Rob Blinzler: hey – are you referring to my script?

@Andy: No, actually I’m developing on Asp.Net. I was referring to David Walsh’s.