10

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

I know how to use the .css() getter to get elements, but how to get the border-radius using that method?

jQuery's documentation is sparse.

HTML:

<div id="#somediv"></div>

CSS:

#somediv {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
S Pangborn
  • 12,593
  • 6
  • 24
  • 24

3 Answers3

7

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"
Community
  • 1
  • 1
Alconja
  • 14,834
  • 3
  • 60
  • 61
  • 3
    I can confirm this. It looks like it can only return the radius broken down into its component parts after it is computed. So -webkit-border-radius becomes 'border-bottom-left-radius', 'border-top-left-radius', 'border-bottom-right-radius', and 'border-top-right-radius'. Note that I only got around to testing in Chrome before I saw that this was answered. – Bradley Mountford May 24 '10 at 23:15
  • @Bradley - well spotted. Although it looks like that only works in Chrome. `-webkit-border-top-left-radius` seems to work in Safari & Chrome though. – Alconja May 24 '10 at 23:33
  • Thanks for all the help. According to Bradley's findings, it would seem that Chrome is implementing the full spec more completely. It's interesting that all of the browsers break it up into individual corners. – S Pangborn May 25 '10 at 17:58
4

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.

Tgr
  • 27,442
  • 12
  • 81
  • 118
2

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>
karsin
  • 21
  • 1