How do I get the border-radius from an element using jQuery?

Question

I\'ve got a div, with the following HTML and CSS. In an attempt to make my Javascript code more robust, I\'m attempting to retrieve certain CSS attributes from the selected

Answer 1

In Firefox at least, reading with $('#foo').css('MozBorderRadius') works. $('#foo').css('-moz-border-radius') does not, even though it works when setting the value.

Answer 2

I'm guessing it's not officially supported yet as it's a bit unpredictable... In Firefox using $("#somediv").css("-moz-border-radius", "20px"); will set the border radius fine, but trying to read it back via $("#somediv").css("-moz-border-radius"); returns an empty string... However, it appears that Firefox explodes the border radius into its component parts meaning $("#somediv").css("-moz-border-radius-topleft"); will work (obviously only returns one corner's settings though).

---

Edit:

As Tgr points out $('#foo').css('MozBorderRadius') will let you read it back generically in Firefox. And as Bradley Mountford points out in a comment below, it looks like you can read from Webkit using the component parts too (although only chrome seems to like border-top-left-radius, where as both Chrome & Safari handle -webkit-border-top-left-radius...

So summarising, you get the following (based on your 5px setting):

In Firefox:

$("#somediv").css("MozBorderRadius");             //"5px 5px 5px 5px"
$("pre").css("-moz-border-radius-topleft");       //"5px"

In Webkit (tested in Chrome & Safari):

$("pre").css("-webkit-border-top-left-radius");   //"5px 5px"

Answer 3

The previous answers didn't work for me.

The code below works for me in Firefox and Chrome, and will provide the border-radius for each corner -- but only for an element with an ID. No jQuery though.

More information here :]

function getStyle(oElm, css3Prop) {

  var strValue = "";

  if (window.getComputedStyle) {
    strValue = getComputedStyle(oElm).getPropertyValue(css3Prop);
  }
  //IE
  else if (oElm.currentStyle) {
    try {
      strValue = oElm.currentStyle[css3Prop];
    } catch (e) {}
  }

  return strValue;
}

//call as follows
var brTopLeft = getStyle(document.getElementById("element"), "border-top-left-radius");
var brTopRight = getStyle(document.getElementById("element"), "border-top-right-radius");
var brBottomRight = getStyle(document.getElementById("element"), "border-bottom-right-radius");
var brBottomLeft = getStyle(document.getElementById("element"), "border-bottom-left-radius");


document.getElementById("br-tl").innerHTML = brTopLeft;
document.getElementById("br-tr").innerHTML = brTopRight;
document.getElementById("br-br").innerHTML = brBottomRight;
document.getElementById("br-bl").innerHTML = brBottomLeft;

#element {
  height: 50px;
  width: 50px;
  margin: 20px;
  border: 2px solid black;
  border-radius: 5px 10px 14px 23px;
}
   

<div id="element"></div>

<p>Border-radius-top-left: <span id="br-tl"></span>
</p>
<p>Border-radius-top-right: <span id="br-tr"></span>
</p>


<p>Border-radius-bottom-left: <span id="br-bl"></span>
</p>
<p>Border-radius-bottom-right: <span id="br-br"></span>
</p>