Test for Border-Radius Support

Published April 15, 2010 by Rob Glazebrook.

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.

28 Responses

  1. Pingback: Test for Border-Radius Support | Source code bank

  2. Top Wordpress Themes (reply)

    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.

  3. Marc (reply)

    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?

    1. Rob Glazebrook (Author) (reply)

      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!

  4. Pingback: links for 2010-04-21 | Folks Pants

  5. Amit (reply)

    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

  6. Pingback: Cross-Browser Rounded Buttons with CSS3 and jQuery

  7. Santi (reply)

    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'],

  8. Pingback: CSS3 | motkit

  9. Michael Haren (reply)

    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.

    1. Rob Glazebrook (Author) (reply)

      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. :)

  10. Ranjit (reply)

    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…

  11. Pingback: Cross-Browser Support for HTML5 Placeholder Text in Forms

  12. Pingback: 30 Development Tutorials | Jquery Radar

  13. Pingback: Making a Sphere in CSS

  14. Pingback: Cross-Browser Support for HTML5 Placeholder Text in Forms | DWH-UK.com : Great Themes at Sensibles Prices!

  15. martin (reply)

    One question – you need 2 px for borders, right, otherwise it breaks – if you have once a hack how to make that as well with 1 px I would be very thankfull

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>