How to use feature detection to know if browser supports border-radius? (Including IE9)

Question

I've seen plenty of examples for detecting support for border radius using something like:

var cssAttributeNames = ['BorderRadius', 'MozBorderRadius', 'WebkitBorderRadius', 'OBorderRadius', 'KhtmlBorderRadius']; 
for (var i = 0; i < cssAttributeNames.length; i++) {
    var attributeName = cssAttributeNames[i];
    if (window.document.body.style[attributeName] !== undefined) {
        this._useCss = true;
        break;
    }
}

But this doesn't seem to work for IE9, which does support border-radius. Am I missing something?

score 3 · Accepted Answer · answered Mar 11 '11 at 19:41

3

Got it - the detection array needs 'borderRadius' added - it's case-sensitive.

answered Mar 11 '11 at 19:41

mhildreth

401
1
5
11

score 2 · Answer 2 · answered Mar 11 '11 at 19:16

2

Modernizr is a Javascript library used to detect HTML5 features (including border-radius), so if you're looking for a ready made solution, check that out.

answered Mar 11 '11 at 19:16

wsanville

37,158
8
76
101

Had not seen this before. It's kind of awesome. – Chris Shouts Mar 11 '11 at 20:00

How to use feature detection to know if browser supports border-radius? (Including IE9)

2 Answers2

Linked