Jquery is not retrieving border radius in firefox

Question

I have a div that has a border radius. I am trying to retrieve the border-radius using Jquery. It is working everywhere except firefox.

The file:

<html>
<head>
  <script src="resources/jquery/jq.js"></script>
</head>
<style>
   div{
     border-radius:30px;
     background-color:black;
     display:block;
     width:300px;
     height:300px;
   }
 </style>
 <body>
   <div id = "SelectedDiv"></div>
 </body>
</html>

$('#SelectedDiv').css('border-radius') returns an empty string ( "" )

I tried to do what was instructed in the following stackoverflow page: How do I get the border-radius from an element using jQuery? since they had the same problem. However, nothing worked

$('#SelectedDiv').css("MozBorderRadius");

and

$('#SelectedDiv').css("-moz-border-radius-topleft");

returned undefined

Firefox computes it differently, you'd need to check specifically for each corner, e.g: `$('#SelectedDiv').css("borderBottomLeftRadius")` etc... That's said, you'd have better to explain why would you need to retrieve computed border radius for a specific element? Maybe this is a XY problem — A. Wolff, Mar 06 '15 at 11:32
This is just a test. So, try $('#SelectedDiv')[0].style.borderRadius — lshettyl, Mar 06 '15 at 11:38
@LShetty No, this returns empty string, FF computes border radius independently for each corner. Please, don't ask me why?! ;) Because i have honestly no idea... I meant i guess why but still don't know why the `borderRadius` property isn't fill with `30px 30px 30px 30px` — A. Wolff, Mar 06 '15 at 11:39

score 3 · Accepted Answer · edited May 23 '17 at 12:26

I've tried some solutions proposed here but they seems to not be working, therefore I've tried this:

Retrieve all the CSS properties directly from a fiddle.
Check them.
Retrieve the "true names" of the properties I was looking for.

Despite some says that they have "border-radius" and "-moz-border-radius" working, in my case they are not working in firefox 26.0

-> "MozBorderRadius" : http://prntscr.com/6dcu2z -> "border-radius" : http://prntscr.com/6dcubd

So, I've checked THIS post: jQuery CSS plugin that returns computed style of element to pseudo clone that element? , included it in my fiddle and looked for every single CSS property of the div:

http://prntscr.com/6dcurt

So, from that, I've found out that you can retrieve the equivalent by using:

'borderBottomLeftRadius' 'borderBottomRightRadius' 'borderTopRightRadius' 'borderTopLeftRadius'

http://prntscr.com/6dcv90

What confuses me, though, is that the Object seems to really have only these 4 properties for the border radius, and there seems to be no way to retrieve the "border radius" generic property even in Chrome, despite by using $('#div').css('border-radius'); it does return 30px.

Fiddle:

http://jsfiddle.net/j2zLq357/

console.log($('#SelectedDiv').css("borderBottomLeftRadius"));
console.log($('#SelectedDiv').css("borderBottomRightRadius")); 
console.log($('#SelectedDiv').css("borderTopLeftRadius")); 
console.log($('#SelectedDiv').css("borderTopRightRadius"));

(I've just logged them, do whatever you want with them, you can rebuild your border-radius property by parsing all the 4 properties).

Hope this helps.

TheCarver · Answer 2 · 2015-03-06T11:37:50.997

1

This seems to work for me:

var radius = $('.my-element').css("borderTopLeftRadius");

// returns 5px

DEMO

If you want just the number, not PX, use parseInt():

var radius = parseInt($('.my-element').css("borderTopLeftRadius"),10)

// returns 5

edited Mar 06 '15 at 11:37

answered Mar 06 '15 at 11:24

TheCarver

19,391
25
99
149

Jquery is not retrieving border radius in firefox

2 Answers2