How might I get an element's border color value using jQuery?

Question

Using $("#id").css("background-color") to retrieve an element's background color (or most other CSS attributes) works just fine, but $("#id").css("border-color") returns an empty string.

How can I get the border color value used on the element?

Answer 1

CSS has "short-hand" properties that allows you to send multiple properties at once. Like font, border, background, etc. Well the border-color CSS property actually sets the 4 properties border-top-color, border-right-color, border-bottom-color, and border-left-color.

If you want to get the border-color, you need to specify which side. For instance, border-left-color $("#id").css("border-left-color"). This should work just fine since it seems as you're expecting that every side has the same color.

Answer 2

William was close... The property you're looking for is border-left-color, so in full you need

$('#ID').css("border-left-color")

and to set it

$('#ID').css("border-left-color","blue");

for example.

Good luck, and hit me back in the comments.