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

Tags: jquery,css,dom

Problem :

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?

Solution :

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, to obtain the current value of border-left-color, you'd do:


This should work just fine since it seems as you're expecting that every side has the same color.

    CSS Howto..

    How to make a site have a built in user-friendly editor?

    How do I make a div scrollable, without showing a nasty scrollbar?

    How to float elements in rows.

    How can I set the style of a dojo-element?

    How do I set background-image height using jQuery?

    How Can I Hide *Only* the Button (Not Entire Element) for the Input Type File in a Django Form? [duplicate]

    How to prevent corners on CSS box-shadow?

    How does Media Queries Reacts

    How to remove right border

    How to have 3 sections in a row

    How do I fix this simple CSS floating issue in IE?

    How to edit CSS class via jQuery if statement

    Writing CSS rules to different browsers, how? [duplicate]

    CSS - How to only apply a style to a div that is inside another div?

    Background Image in WebView showing in Simulator, but not on Device

    How to get rid of excess blank space in CSS slideshow without getting rid of manual button transition?

    How to make div blocks not floating using CSS?

    How to make a border in css that is actually on the very edges

    How to create dynamic business listings in wordpress [closed]

    How do I increase the width and font-size of my twitter feed widget?

    CSS: How do I stop hover effects from pushing my text?

    How to put inline circles made in CSS under each other when screen scales?

    How do I control the spacing between my child links in my CSS driven menu dropdown?

    How to create an highlight animation when a control gets focused [closed]

    How to display loading.gif at the center of the screen which has a scrollbar

    how to implement background img

    How Do I Add CSS Class to body Element in Meteor?

    How to select the las Li with Xpath or Css Selector

    How to make a horizontal expandable menu fluid

    Using CSS to show/hide content. How do I make hide the default