Question

This should be a really simple problem, but I can’t quite figure out what I am doing wrong. I am trying to access the CSS property ‘border-bottom’ like this:

var temp = $('#divName').css('border-bottom');

Unfortunately, after this, temp contains the string ""

Does anyone know why this is not working or what I should do differently to make it function? Thanks.

Answer 1

The styles have to be more specific. Since border-bottom is a short-property for other properties (similar to background, to name a common one), the property has to be explicitly given.

var elem = $('#divName');
var border_width = elem.css('border-bottom-width');
var border_color = elem.css('border-bottom-color');
var border_style = elem.css('border-bottom-style');
var border_bottom = border_width + " " + border_color + " " + border_style;

Fiddle: http://jsfiddle.net/6wRj4/
See also: MDN: border-bottom short-hand.