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…