The best way of checking for -moz-border-radius support

Question

I wanted some of those spiffy rounded corners for a web project that I\'m currently working on.

I thought I\'d try to accomplish it using javascript and not CSS in a

Answer 1

How about this?

var mozborderAvailable = false;
try {
  if (typeof(document.body.style.MozBorderRadius) !== "undefined") {
    mozborderAvailable = true;
  }
} catch(err) {}

I tested it in Firefox 3 (true) and false in: Safari, IE7, and Opera.

(Edit: better undefined test)

Answer 2

I've developed the following method for detecting whether the browser supports rounded borders or not. I have yet to test it on IE (am on a Linux machine), but it works correctly in Webkit and Gecko browsers (i.e. Safari/Chrome and Firefox) as well as in Opera:

function checkBorders() {
  var div = document.createElement('div');
  div.setAttribute('style', '-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;');
  for ( stylenr=0; stylenr<div.style.length; stylenr++ ) {
    if ( /border.*?-radius/i.test(div.style[stylenr]) ) {
      return true;
    };
  return false;
};

If you wanted to test for Firefox 2 or 3, you should check for the Gecko rendering engine, not the actual browser. I can't find the precise release date for Gecko 1.9 (which is the version that supports anti-aliased rounded corners), but the Mozilla wiki says it was released in the first quarter of 2007, so we'll assume May just to be sure.

if ( /Gecko\/\d*/.test(navigator.userAgent) && parseInt(navigator.userAgent.match(/Gecko\/\d*/)[0].split('/')[1]) > 20070501 )

All in all, the combined function is this:

function checkBorders() {
  if ( /Gecko\/\d*/.test(navigator.userAgent) && parseInt(navigator.userAgent.match(/Gecko\/\d*/)[0].split('/')[1]) > 20070501 ) {
    return true;
  } else {
    var div = document.createElement('div');
    div.setAttribute('style', '-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;');
    for ( stylenr=0; stylenr<div.style.length; stylenr++ ) {
      if ( /border.*?-radius/i.test(div.style[stylenr]) ) {
        return true;
      };
    return false;
  };
};

Answer 3

I know this is an older question, but it shows up high in searches for testing border-radius support so I thought I'd throw this nugget in here.

Rob Glazebrook has a little snippet that extends the support object of jQuery to do a nice quick check for border-radius support (also moz and web-kit).

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);
}); });

Attribution

That way, if there isn't support for it you can fall back and use jQuery to implement a 2-way slider so that other browsers still have a similar visual experience.

Answer 4

Why not use -moz-border-radius and -webkit-border-radius in the stylesheet? It's valid CSS and throwing an otherwise unused attribute would hurt less than having javascript do the legwork of figuring out if it should apply it or not.

Then, in the javascript you'd just check if the browser is IE (or Opera?) - if it is, it'll ignore the proprietary tags, and your javascript could do it's thing.

Maybe I'm missing something here...

Answer 5

Apply CSS unconditionally and check element.style.MozBorderRadius in the script?

Answer 6

The problem with this is that Firefox 2 does not use anti-aliasing for the borders. The script would need to detect for Firefox 3 before is uses native rounded corners as FF3 does use anti-aliasing.