As I’ve pledged, today I’m posting the Curved corner without any js stuff.
For firefox, you can set border-radius by prefixing “-moz” to the css property. And ofcource for webkit use “-webkit” . Now IE ?? .. As IE is not a good browser to work with css, we need to make it so. Here, you need to use a nice css hack. Some how I managed to have an htc file to make border-radius work in IE 
. You can download it here. border-radius.htc .
The Demo
1 . I’ve just made: http://www.htmlremix.com/files/20080924-border-radius.zip
The CSS:
- .curved {
- -moz-border-radius:10px;
- -webkit-border-radius:10px;
- behavior:url(border-radius.htc);
- }
The HTML:
<div class="curved">Curvd div</div>
The explanation :
Do you really want an explanation for this simple 3 line css ?. I don’t think so. Ofcourse if you need, I can.
Browsers :
All browsers
18 Comments until now
hmm.. Good try, this is interesting, also this can reduce a lot of codes in the page…
Keep exploring. all d best
Great idea with that htc File! But somehow it doesnt work in Multiple IE6. Iam going to test it on a real XP SP2 IE6 install later on.
Ok, iam back here i checked on Browsercam with XP SP2 and it worked Fine!
Great!
There are some problems with this script when using floats, it will tamper with margins and therefor layouts will be wacked
Fresh concept!
Needs some work to avoid text in the curved part of the div (border)
Keep up the good work
For some reason if I have no border set in my CSS in IE7 the curved corner DIV has a black border that I can’t remove.
Any ideas?
it doesn’t work with Opera 8.21 and IE 6 on Win XP …
Awesome script Remiz
@abecadlo normal for Opera it does not support htc behaviors. your IE6 must be a standalone version.
@Paul Gonella: normal: there is a stroke. Apparently it cannot be removed.
I’ve tweaked the htc so that the stroke has the same color as the background-color
l.30 strokecolor=”‘ + fillColor + ‘”
and I’ve adapted my version so that the width and height are always the same as the elements the script applies to:
var w=this.offsetWidth,h=this.offsetHeight;
width: ‘+(w-2)+’px; height:’+(h-2)+’px; antialias: true; in the roundrect
@ Martin
So you’r gonna make it work well.
Why dont you drop your version of htc here?
@Salco I will when it’s done and cleaned
Rly all browsers? wat about firefox2? icab? konqueror?
Hum… it seem to work on ie7… is that normal? what about google chrome? I’ll try getting some spare time to play with it.
Looks great on firefox though!
Good job
Thanks for the script.
Works perfect… or almost.
For some reason, it also removes some styles within divs.
See, for instance, the tag cloud in
http://ictlogy.net/bibciter
Now deactivated for IE, but, if activated, the tag cloud becomes a normal bullet list. Weird.
yes it works very nice
Firefox 2.0.0.17 chokes on the image bit, it does draw the curver border i’ts not wide enough to cover the entire edge of the image.
My I7 complains when trying to set arcSize, heres the watch on ‘this’
this
{…}
defaults: Access is denied.
document: {object}
element: {object}
Also without any JS stuff is a bit misleading
There are many simple and javascript enabled complex examples to build rounded box. But the best is which are exandable freely and not of fixed with.. Regards Bikram
I am trying to fix the joomla layout by including this type of box. Can anybody help me
Thanks great script!
To eliminate borders stroked=”False” in the roundrect.
Add your Comment!