jQuery - css('border-width') returning as an empty string on Firefox but not on Chrome [duplicate]

Question

I'm trying to debug a cross browser issue with my jQuery/CSS.

I'm attempting to get the border width of a class. The class is set in CSS like so:

.mod_button {
    position: relative;
    color: #fff;
    border-color: #06253e;
    border-width: 1px;
    border-style: solid;
}

In jQuery, I am attempting to get the border-width like so:

var bWidth = $('.mod_button').css('border-width');

This seems to return properly as a string of "1px" in Chrome. However, in Firefox it always returns as an empty string "". I've checked these results stepping through the JS debuggers in the developer tools on both Chrome and Firefox.

I've been going nuts trying to debug this issue and I can't seem to find any concise answers. Perhaps the community here can give me a clue as to how I can fix this issue.

Thank you!

Answer 1

Properties such as "border", "background", and even "border-width" are shorthand. They are not supported. Instead, use more specific properties: "border-top-width", "border-bottom-width".

The following line should work in all browsers:

var bWidth = $('.mod-button').css('border-top-width');

Related question: Getting CSS border value with jQuery in Firefox 14.0.1