Question

I thought it would be an idea to try to detect browsers that didn’t support border-radius with % values. I’ve used the code below to try to detect for border radius but it’s not playing ball. I get a empty alert box.

function getStyle(ele,styleProp){
            var x = document.getElementById(ele);
            if(x.currentStyle){
                var y = x.currentStyle[styleProp];
            }else if(window.getComputedStyle){
                var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
            }
            return y;               
        }

        $('body').append('<div id="test"></div>');

        var style = getStyle('test','-webkit-border-radius');
        alert(style);

I got this code from here

It seems somewhat limited, it’s fine for background-color, height & width, but will return empty for padding, margin and of course border-radius.

Any idea what’s the cause of this limitation?

Answer 1

Things like “margin”, “padding”, and “border-radius” are all shortcuts to the actual properties such as “margin-left”, “padding-bottom”, and “border-top-right-radius”. Try getting those.