rounded corner button FOR IE

[emanuelle]

do you have any idea how I can make a rounded corner button only with css that also works with IE

moz-border-radius: Xpx;
-webkit-border-radius: Xpx;

this as you know does not work with IE.

could you maybe help

thank you

Emanuelle

[djr33]

I don't believe there's a way to do this: it simply doesn't exist in IE. Maybe in a later version.

If you want to do this, one way to try it is to use images. This is complex as well, though.

[emanuelle]

thanks, that is a problem since i cannot use images
but thank you anyway

[traq]

There are javascript solutions as well, such as this jQuery plugin (http://www.malsup.com/jquery/corner/).

[djr33]

That's interesting. How does it work? Is it doing a ridiculously high number of layers with borders or is it using images in some automated way? I think it's just html...
I wonder if that slows rendering on some systems. But, yes, interesting...

[traq]

Yes and no. For simple rounded corners, the plugin first attempts to use native browser support via css - i.e., border-radius - and uses tons of <div>s in browsers that don't (i.e., IE). And of course, all the fancy, non-round corners use extra markup. Compare:


<div style="-moz-border-radius: 10px 10px 10px 10px;" class="demo"><h1>Round</h1> <code><p>$(this).corner();</p></code></div>

to

<div style="border: medium none; position: relative;" class="demo"><div style="position: relative; margin: -20px -20px 10px;" class="jquery-corner"><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 10px;"></div><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 9px;"></div><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 8px;"></div><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 7px;"></div><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 6px;"></div><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 5px;"></div><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 4px;"></div><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 3px;"></div><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 2px;"></div><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 1px;"></div></div><h1>Bevel</h1> <code><p>$(this).corner("bevel");</p></code><div style="position: absolute; margin: 0pt; padding: 0pt; left: 0pt; bottom: 0pt; width: 100%;" class="jquery-corner"><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 1px;"></div><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 2px;"></div><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 3px;"></div><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 4px;"></div><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 5px;"></div><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 6px;"></div><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 7px;"></div><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 8px;"></div><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 9px;"></div><div style="overflow: hidden; height: 1px; min-height: 1px; font-size: 1px; background-color: transparent; border-style: none solid; border-color: rgb(255, 255, 255); border-width: 0pt 10px;"></div></div>
As for processing time, everything that's "cool" works slowly on some systems. I can think of far more superfluous things (http://css-tricks.com/circulate/) that take far more resources. This, however, is convenient in that you don't have to double- and triple-code to get your desired effect in all browsers - and, also because it's js, you get a consistent effect in all browsers. And if js is turned off, you haven't really lost much (degrades gracefully).