Question

I’m attempting to get the width of an element’s border with $('#foo').css('border-width-bottom'), but in IE7 this returns medium rather than an number, or even a string with a number in it (ie 7px).

Is there a way to get the width, in pixels, of an element’s border in IE7? I know I can cheat and map the strings to their pixel equivalents, but is there a cleaner way to do it?

Update: I know that if you are explicitly setting the border in pixels, it will return the proper value, but what if it is set to ‘medium’? I want the width in pixels, not the border-width property value.

Answer 1

border-bottom-width works just fine in IE7, here’s a fiddle: http://jsfiddle.net/2P7cn/

$(function(){
   alert($("#test").css("border-bottom-width")); 
});

Edit: The “medium/thick/thin” values are browser dependent. With some trickery (outerHeight-height-padding), you could figure out the border height sum and subtract the known one (or divide by 2 if they’re both medium).