How to get a style property with multiple values in jquery?

Question

I have this div:

#centerFrame { background-color:#888; height:100px; width:100px; }
<div id="centerFrame" style="border-top-left-radius: 25px 0px;"></div>

but when i try to get the value of border radius it always returns 0px, how can I get both values?

console.log($("#centerFrame").css("border-top-left-radius"));
>0px

Answer 1

I think that the right answer would be one of these without leaving the jquery context since any of these get the computed style but the property value:

$("#centerFrame").prop("style")["border-top-left-radius"];

or

$("#centerFrame").get(0).style.borderTopLeftRadius;

Answer 2

0px is not a meaningful value for the horizontal/vertical radius component, so the browser is interpreting the entire property differently. What exactly would a 0px radius component look like, if not identical to an overall radius of 0px?

Counter-example:

<div id="centerFrame" style="border-top-left-radius: 25px 5px;"></div>

http://jsfiddle.net/mattball/cCYAe/

Answer 3

Plain JS seems to do the trick :

document.getElementById('centerFrame').style.borderTopLeftRadius;

FIDDLE