What is the most consistent, cross-browser patible jQuery plugin for rendering rounded corners on HTML elements without images?
Everything I have used so far has either been inconsistent and unreliable across different browsers, and/or has added unnecessary elements that interfere with cascading CSS.
What is the most consistent, cross-browser patible jQuery plugin for rendering rounded corners on HTML elements without images?
Everything I have used so far has either been inconsistent and unreliable across different browsers, and/or has added unnecessary elements that interfere with cascading CSS.
Share Improve this question asked Jun 13, 2011 at 17:07 smartcavemansmartcaveman 42.3k31 gold badges133 silver badges217 bronze badges2 Answers
Reset to default 16Wait, what?
"Every browser" except IE6/7/8 supports border-radius: http://caniuse./border-radius
For the aforementioned troublesome browsers, you can use CSS3 PIE:
PIE currently has full or partial support for the following CSS3 features:
• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image
+1 on CSS3 PIE as well. However contrary to earlier ments, it does actually support different radii per corner, by way of multiple values on the shorthand value. See here: http://css3pie./documentation/supported-css3-features/#border-radius
As an example: border-radius: 10px 10px 0 0; will round the top corners but leave the bottom corners square. You can also supply different radii for x vs. y for each corner, for example: border-radius: 5px 5px 0 0 / 10px 10px 0 0;
Since all other current versions of the major browsers support this same exact shorthand, it is easy in bination with PIE to get them all looking alike as long as you use the shorthand.