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:
1 2 3 4 5 6 7 | 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:
1 2 3 4 5 6 7 | $(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.
On April 16, 2010
12:05PM
Top Wordpress Themes said:
Lucky for me 90% of the traffic that comes to my sites are using Firefox/Safari so I don’t even bother catering to ie, I would assume it is somewhat similar for your site considering it is about web design and any web designer would have to be completely crazy to be using ie.
On April 16, 2010
12:58PM
Paweł P. said:
Interesting article, but
for me test isn’t good :)
On April 18, 2010
2:57PM
Marc said:
You mention in this post that the scrip enables rounded corners in IE. Care to elaborate as to which flavors of IE are covered? 8? 7? 6?
On April 18, 2010
7:30PM
Petter Nilsen said:
Opera has supported border-radius (non vendor prefixed) since 10.50, which was released on March 2nd, 2010. 10.50 is currently Windows-only, but the Mac version is in beta. See http://www.opera.com/docs/specs/presto25/#css for what CSS is supported.
On April 19, 2010
7:50AM
Jordan Walker said:
What ever works.
On April 19, 2010
8:45AM
Rob Glazebrook said:
Hi Petter,
Thanks for the good information — looks like I don’t have the most recent version of Opera installed after all. The great thing about this testing method is, it will recognize the border-radius support in Opera, even if I don’t!
On April 20, 2010
1:24AM
Jacob Lowe said:
perfect thanks for the snippet.
On April 23, 2010
10:33PM
Amit said:
Hey Rob,
After exiting the each loop, you still set the borderRadius property to false?:
return (!jQuery.support.borderRadius);
Will the function then not return false anyways? Noobie question sorry
On June 06, 2010
4:14AM
Santi said:
Hi,
the code can`t recognize support of border radius in Opera 10.5x. To add support for Opera 10.5x you need to insert “borderRadius” as parametr, so finaly it looks like:
jQuery.each(['borderRadius','BorderRadius','MozBorderRadius','WebkitBorderRadius','OBorderRadius','KhtmlBorderRadius'],
On August 09, 2010
10:20AM
Michael Haren said:
Amit,
The return statement returns false as soon as one of the checks is positive for border-radius support. This is a return from $.each, which, tells it to stop iterating. In effect, this short circuits detection as soon as the browser is found, saving the script from checking additional browser strings.
On August 16, 2010
1:28AM
metude said:
Opera removed vendor prefix, so your test shows wrong information for Opera users…
On August 16, 2010
8:51AM
Rob Glazebrook said:
Hey Metude,
The beauty of this test is, it’ll trigger true if any of the possible prefixes is found. So if Opera removes -o-border-radius and just supports border-radius instead, it’ll trigger true on that. And older versions of Opera will still trigger on -o-border-radius. :)
On October 25, 2010
8:49AM
Ranjit said:
Its interesting. One more thing. Please check Jun 06th comment. Its going to out of boundary. You can use following css property for “P” tag and avoid this issue.
Tag is : word-wrap: break-word;
Let me know if anything is wrong. Luv cssnewbie…
On December 03, 2010
2:08AM
Rassin said:
This is great. Could I get your news letter please?
Thanks,
rassin
On April 16, 2011
9:07AM
Zephlon Arphanosh said:
I viewed the example page in ie9, and it said ie9 does not support border-radius. And yet, the corners of the info box are rounded without any background images involved.
http://screencast.com/t/dEjzQWhsFs
On May 05, 2011
5:23AM
Rali Madhu said:
The Article is good, but i need to work the Border-Radius Support in IE also, anybody please help me.
On August 18, 2011
2:00PM
mrray said:
I believe ‘borderRadius’ needs to be added for Firefox 4+ support. Thanks for the script!
On January 16, 2012
6:07PM
Bruce said:
Just what I needed today … thanks for putting it out here!