I need to calculate the width of an element's border. If I set it explicitly (via CSS), then I can access it in JavaScript by:

    element.style.borderWidth

However, if only specify border style property (and not 'border-width') ->

    border-style: solid

Then the borderWidth property is empty. Why? My approach to calculate width is as follows:

if(element.style.borderWidth == ''){
    borderWidth = (offsetHeight - clientHeight)/2
}

Is there any other way to calculate border width whilst only setting border-style?

I need to calculate the width of an element's border. If I set it explicitly (via CSS), then I can access it in JavaScript by:

    element.style.borderWidth

However, if only specify border style property (and not 'border-width') ->

    border-style: solid

Then the borderWidth property is empty. Why? My approach to calculate width is as follows:

if(element.style.borderWidth == ''){
    borderWidth = (offsetHeight - clientHeight)/2
}

Is there any other way to calculate border width whilst only setting border-style?

• javascript
• css
• dom
• properties

• 4 What you are looking for is the puted style of the element. – ThiefMaster Commented Dec 7, 2012 at 21:01

1 Answer 1

You can use the window.getComputedStyle for modern browsers

window.getComputedStyle(element).borderBottomWidth;

For IE pre-9 you will have to use an alternative

element.currentStyle.borderBottomWidth