Way Minus
1. set picture as background | perpomance
2. use JQuery | call jQuery function for each element to round
3. use behavior (htc file)
I think third is the best. I found some posts discuss this problem:
http://fetchak.com/ie-css3/
http://code.google.com/p/curved-corner/...
The idea is to use css
<div class="rounded">I have rounded coners</div>
.rounded
{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
behavior: url(roundconers.htc);
},
where roundconers.htc is behavior file with javascript functions fired ondocumentready. To round coners it use VML as background of container.
Unfortunately I found out that css like
.roundedTopRightLeft
{
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
behavior: url(roundconers.htc);
}
have no effect. So I try to fix it in my behavior based on script from http://fetchak.com/ie-css3/.
