Question

So I’m playing with $(el).css(), trying to determine if an element has a border. I use .css("border-style", "solid") to set the border, which works, but actually it sets 4 individual styles:

border-right-style
border-left-style
border-top-style
border-bottom-style

So, checking for a border is a bit cumbersome as you have to do something like:

if ($(el).css("border-right-style") == "solid" && $(el).css("border-left-style") == "solid" && ...) {}

Simply checking for $(el).css("border-style") != "" doesn’t works since border-style is always equal to “”.

Is there a more elegant way to do this?

Answer 1

border-style is Shorthand and you cant get them together so you have to get them separatly, because As per Jquery CSS documentation

Shorthand CSS properties (e.g. margin, background, border) are not supported.
For example, if you want to retrieve the rendered margin, 
use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.