Of all the fantastic magical CSS3 properties out there, border-radius was one of the first I really latched on to. It made sense to me from the start, and I could see immediate practical uses (at least, as far as a border can be practical). If you’re not using the border-radius property yet, be sure to check out my article on how to use it.
Unfortunately, even though more advanced browsers started supporting border-radius years ago, not all browsers are up to speed yet. As of this writing, border-radius is supported in Webkit (Safari/Chrome), Firefox, and rumor has it Konqueror, though I don’t have a Linux install so I can’t prove that. That leaves Opera and Internet Explorer out of the game – I’ve heard rumors that Opera will support border-radius soon, but the latest version is still a no-go.
As I argued in my last article on the topic, most of the places people should use rounded corners today fall into the realm of “progressive enhancement”: the site looks better with the element rounded, but it’s not the end of the world if someone sees a square corner.
Of course, what should be true and what a client requires aren’t always the same thing.
I ran into this problem recently. I needed to create new buttons in CSS to replace dozens of image-heavy buttons. The buttons were all different widths but were otherwise very similar: background color, centered text… and rounded corners.
I made quick work of the buttons for those browsers that support border-radius, but that left Opera and IE out of the fun. For them, I developed a different way of rounding the corners, but then I needed a quick way to tell which browsers to give the simple border-radius solution, and which to give the more complex solution.
Enter jQuery. The following tiny script extends the jQuery.support object to include border-radius information:
jQuery(function() {
jQuery.support.borderRadius = false;
jQuery.each(['BorderRadius','MozBorderRadius','WebkitBorderRadius','OBorderRadius','KhtmlBorderRadius'], function() {
if(document.body.style[this] !== undefined) jQuery.support.borderRadius = true;
return (!jQuery.support.borderRadius);
});
});
That’s all it takes, folks. You can copy it, or download the script from here. And if you want to test it out, here’s a quick and dirty example page.
$.support.borderRadius is a Boolean: if the browser supports border-radius, it’s true, otherwise it’s false. For example, you could use it like this:
$(function() {
if($.support.borderRadius) {
alert('I can do rounded corners!');
} else {
alert('No rounded corners for me!');
}
});
And now, because this is a tutorial blog, I’ll explain how the script works. The copy/paste crowd can stop reading now. :)
How it Works
We’re piggybacking here on an existing object in jQuery called jQuery.support. It already contains lots of information about what the user’s browser does or doesn’t support. Testing for browser support is considered the heir of the “browser sniffing” practice. Instead of checking to see what browser someone is using, we instead test what that browser can and can’t do.
So the first thing we do is add borderRadius to the support object, and set it to “false” by default.
Next, we loop through an array of CSS properties using jQuery.each(). The array contains every vendor-specific version of border-radius, as well as the standard CSS3 version (which currently isn’t supported by anyone, but will be eventually). I’ve even included the Opera vender-prefixed version, just in case Opera adds support.
For each style, we test to see if the browser understands the style by seeing what it’s set to. If it’s set to blank (or a value, for that matter), then the style is supported. If it’s undefined, that means the browser doesn’t understand the property: it doesn’t support that version of border radius.
If we find a CSS property that the browser understands, that means it supports border-radius! We set borderRadius to be true and exit our loop. Otherwise, borderRadius remains false.
And that’s all there is to it. Let me know what you think. If you have suggestions for improvement I’d love to hear them. And next week, I’ll try to post a tutorial on border-radius where I’ve used this script.