Advertisement
Advertisement


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 an effort to keep the requests for image files to a minimum (yes, I know that it's possible to combine all required rounded corner shapes into one image) and I also wanted to be able to change the background color pretty much on the fly.

I already utilize jQuery so I looked at the excellent rounded corners plugin and it worked like a charm in every browser I tried. Being a developer however I noticed the opportunity to make it a bit more efficient. The script already includes code for detecting if the current browser supports webkit rounded corners (safari based browsers). If so it uses raw CSS instead of creating layers of divs.

I thought that it would be awesome if the same kind of check could be performed to see if the browser supports the Gecko-specific -moz-border-radius-* properties and if so utilize them.

The check for webkit support looks like this:

var webkitAvailable = false;  
try {  
    webkitAvailable = (document.defaultView.getComputedStyle(this[0], null)['-webkit-border-radius'] != undefined);
} 
catch(err) {}

That, however, did not work for -moz-border-radius so I started checking for alternatives.

My fallback solution is of course to use browser detection but that's far from recommended practice ofcourse.

My best solution yet is as follows.

var mozborderAvailable = false;
try {
    var o = jQuery('<div>').css('-moz-border-radius', '1px');
    mozborderAvailable = $(o).css('-moz-border-radius-topleft') == '1px';
    o = null;
} catch(err) {}

It's based on the theory that Gecko "expands" the composite -moz-border-radius to the four sub-properties

  • -moz-border-radius-topleft
  • -moz-border-radius-topright
  • -moz-border-radius-bottomleft
  • -moz-border-radius-bottomright

Is there any javascript/CSS guru out there that have a better solution?

(The feature request for this page is at http://plugins.jquery.com/node/3619)

2016/02/08
1
11
2/8/2016 1:23:17 PM

Accepted Answer

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)

2011/03/02
11
3/2/2011 4:09:45 PM

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

2016/02/08

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.

2010/08/11

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

2008/08/21

As you're already using jQuery you could use jQuery.browser utility to do some browser sniffing and then target your CSS / JavaScript accordingly.

2008/08/21

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.

2008/10/21