Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

jquery

css

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;
}
like image 461
S Pangborn Avatar asked May 24 '10 22:05

S Pangborn


People also ask

How do you calculate border radius in CSS?

The border radius of the outer element should be equal to the sum of the border radius of the inner element and the distance between the two elements. This can be mathematically expressed as innerRadius + distance = outerRadius or more tersely R1 + D = R2 .

How do four values work on border radius in HTML?

CSS Syntax Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

How do you put border radius on left in CSS?

CSS Syntaxborder-top-left-radius: length|% [length|%]|initial|inherit; Note: If you set two values, the first one is for the top border, and the second one for the left border. If the second value is omitted, it is copied from the first.


2 Answers

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"
like image 73
Alconja Avatar answered Sep 22 '22 08:09

Alconja


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.

like image 37
Tgr Avatar answered Sep 24 '22 08:09

Tgr