IE9, Firefox 4, Opera 10.5, Safari 5, Chrome 4, WebKit 532.5 supports CSS3 border-radius.
Latest jquerycurvycorners 2.1.1 uses -moz-border-radius and not border-radius to create corners to old browsers. How to replace it to border-radius, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius?
The bug you can see on IE6-8 in:
- demo http://fiddle.jshell.net/laukstein/nJRV2/show/light/#intro
- code http://jsfiddle.net/laukstein/nJRV2/
Briefly jquerycurvycorners must apply to border-radius-curvycorners.html!
//full JS in http://jsfiddle.net/laukstein/nJRV2/
if (allR) {
var t = allR.split('/'); // ignore elliptical spec.
t = t0.split(/\s+/);
if (tt.length - 1 === '') t.pop();
switch (t.length) {
case 3:
tL = t0;
tR = bL = t1;
bR = t2;
allR = false;
break;
case 2:
tL = bR = t0;
tR = bL = t1;
allR = false;
case 1:
break;
case 4:
tL = t0;
tR = t1;
bR = t2;
bL = t3;
allR = false;
break;
default:
alert('Illegal corners specification: ' + allR);
}
}
if (allR || tL || tR || bR || bL) {
var settings = new curvyCnrSpec(rule.selectorText);
if (allR)
settings.setcorner(null, null, parseInt(allR), units(allR));
else {
if (tR) settings.setcorner('t', 'r', parseInt(tR), units(tR));
if (tL) settings.setcorner('t', 'l', parseInt(tL), units(tL));
if (bL) settings.setcorner('b', 'l', parseInt(bL), units(bL));
if (bR) settings.setcorner('b', 'r', parseInt(bR), units(bR));
}
$(rule.selectorText).corner(settings);
}
}
for (t = 0; t < document.styleSheets.length; ++t) {
try {
if (document.styleSheetst.imports) {
for (i = 0; i < document.styleSheetst.imports.length; ++i) {
for (j = 0; j < document.styleSheetst.importsi.rules.length; ++j) {
procIEStyles(document.styleSheetst.importsi.rulesj);
}
}
}
for (i = 0; i < document.styleSheetst.rules.length; ++i)
procIEStyles(document.styleSheetst.rulesi);
}
catch (e) {}
}
} else if ($.browser.opera) {
// Apply if border radius is not supported
try { checkStandard = (document.body.style.BorderRadius !== undefined); } catch(err) {}
if (!checkStandard) {
function opera_contains_border_radius(sheetnumber) {
return /border-((top|bottom)-(left|right)-)?radius/.test(document.styleSheets.item(sheetnumber).ownerNode.text);
};
rules = ;
for (t = 0; t < document.styleSheets.length; ++t) {
if (opera_contains_border_radius(t)) {
var txt = document.styleSheets.item(sheetnumber).ownerNode.text;
txt = txt.replace(/\/\*(\n|\r|.)*?\*\//g, ''); // strip comments
var pat = new RegExp("^\\s*(\\w.#-\\w.#, +)\\n\\s*\\{(^}+border-((top|bottom)-(left|right)-)?radius^}*)\\}", "mg");
var matches;
while ((matches = pat.exec(txt)) !== null) {
var pat2 = new RegExp("(..)border-((top|bottom)-(left|right)-)?radius:\\s*(\\d.+)(in|em|px|ex|pt)", "g");
var submatches, cornerspec = new curvyCnrSpec(matches1);
while ((submatches = pat2.exec(matches2)) !== null) {
if (submatches1 !== "z-")
cornerspec.setcorner(submatches3, submatches4, submatches5, submatches6);
rules.push(cornerspec);
}
}
}
}
for (i in rules) if (!isNaN(i))
$(rulesi.selectorText).corner(rulesi);
}
}
});
More details about browser border-radius support https://developer.mozilla.org/en/CSS/-moz-border-radius.
,
You can try this to create rounded corners. Should work in all browsers