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 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;
}

Answer 1

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"