Border-color, CSS property
This page is also about physical property(ies):
And the logical properties:
Summary of characteristics of the border-color property
currentcolor | transparentcurrentcolorComputed value: during an animation, the border-color property gradually changes from one value to another.Per grammar: serialization in the order of syntax.Syntax diagram of border-color.
border-color property.The links in the diagram provide more details about the values.
Download the diagram in SVG.
In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:
color-nameis the name of a color: see Color chart.#xxxxxxis the hexadecimal code of a color.coloris a color, specified with one of the functions :rgb()orrgba(),hsl()orhsla(),hwb(),lab(),oklab(),lch(),oklch(),color(),color-mix().- From one to four colors can be specified by separating them with a space.
Description of the border-color property.
border-color sets the color of an element's borders. The border-color property accepts one to four values:
- If only one value is specified, it applies to all four sides.
- If two values are specified, the first one sets the color of the top and bottom borders; the second one sets the color of the left and right borders.
- If three values are given, the first sets the color of the top border, the second sets the color of the right and left borders, and the last sets the color of the bottom border.
- Finally, when the four values are given, they correspond respectively to the color of the top, right, bottom, and left borders.
There are also specific properties for each of the edges:
border-top-colorborder-right-colorborder-bottom-colorborder-left-colorTo make the border color visible, also remember to set the border-style property.
Language support.
The so-called 'logical' properties take into account the meaning and writing direction depending on the language:
border-block-start-colorborder-block-end-colorborder-inline-start-colorborder-inline-end-colorFinally, two summarised properties that allow you to set the color of the two opposite sides of the element.
border-block-colorborder-inline-color
border-top-colorborder-left-colorborder-right-colorborder-bottom-colorValues for border-color.
Note: the color can be altered by line styles with 3D effect (inset, groove...). Indeed, to create a relief effect,
these styles darken the color on some lines or parts of a line, and lighten the color in other areas.
- border-color: currentcolor;
Default value. The border is the same color as the text.
- border-color: transparent;
The border is invisible, but its thickness is taken into account.
- border-color: #451498;
The border is in the indicated color. All standard notations to define a color are accepted (name, RGB code, etc.). See the different notations for Colors.
- border-color: blue red;
Two color pieces of information separated by a space. The first applies to the top and bottom lines. The second to the right and left lines.
- border-color: blue red black;
Three pieces of color information separated by a space. The first one applies to the top line, the second to the right and left lines, and the last to the bottom line.
- border-color: blue red yellow green;
Finally, four color pieces of information separated by a space apply to each of the lines, going clockwise and starting with the top line.
- border-color: initial; (
currentcolor) border-color: inherit; border-color: revert; border-color: revert-layer; border-color: revert-rule; border-color: unset;Common values are presented on these pages:
initial,inherit,revert,revert-layer,revert-rule,unset.
Examples with the border-color property.
border-radius is used.
This matters in case of overflow.
inset border style: the top and left borders are darker than the bottom and right ones.
Animation of the border-color property.
As usual, we try to suggest original ideas to liven up the properties. Here's a little rotating visual effect created with the animation of the
border-color property.
Access the border-color property via a program
Change the border color in Javascript.
Here's how to change the value of border-color with Javascript. The property name can be written in kebab-case (a dash to separate words),
or in camel-case (a capital letter to separate words).
let el = document.getElementById('id');
el.style['border-color'] = 'blue';
// or
let el = document.getElementById('id');
el.style.borderColor = 'blue';
Read the border color in JavaScript.
This code example works when the property has been set in the HTML code, using the style attribute, and not in CSS via a selector.
The color or colors are returned exactly as they were defined (name, hexadecimal code, hsl() function, etc...).
let el = document.getElementById('id');
let value = el.style['border-color'];
// or
let el = document.getElementById('id');
let value = el.style.borderColor;
Read the computed value of border-color in Javascript.
The computed value is the color applied to the property border-color for this element, a value that may be inherited, or if not, the value
currentcolor, which is the initial value of this property.
In the case of border-color, the color or colors are returned in the form rgb(r,g,b), or rgba(r,g,b,a) if the color
isn't fully opaque. However, if the color was set using the color() function (another color space), the color() function is kept.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('border-color');
Change the border color with JQuery.
Two possible syntaxes, just like in Javascript.
$('#id').css('border-color', 'blue');
// or
$('#id').css('borderColor', 'blue');
Read the computed value of the border-color property with JQuery.
You can read the property with the following code. Like in JavaScript, the color is returned in the form rgb(r,g,b), rgba(r,g,b,a)
or color().
let value = $('#id').css('border-color');
Other code examples.
Other examples of Javascript and JQuery code are given on the page Javascript and CSS.
Test it yourself.
The buttons below apply the entered value to the border-color property and then show either the value as it was applied or the computed value.
This second option lets you see how the value of border-color is stored (serialized). In particular, you'll notice that the color is always returned
in rgb() or rgba() format. However, the new color() function can also be stored as-is because it allows you to select
a color space.
Simulator.
Browsers compatibility with border-color.
No compatibility issues are reported. Support for border-color is fine on all current browsers.
border-color which defines the color of the borders.border-top-color, border-right-color, border-bottom-color, and border-left-color (physical properties).border-block-color, border-inline-color, etc. (logical properties).border-colorproperty
properties
properties
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
KaiOS Browser
Opéra Mobile
Chrome
Edge
Opéra
Safari
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Samsung Internet
Firefox
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Historic of the border-color property.
The shorthand property border-color and the corresponding detailed properties haven't changed over the CSS language versions, but the color
specification has changed a lot: see our page on Colors.
-
Cascading Style Sheets specification - Version 1
This first level of the CSS specification describes the mechanism of cascading style sheets. Authors and readers can add styles to documents. Mainly intended for formatting HTML documents, CSS allows defining colors, fonts, text formatting, spacing (margins), etc. The CSS language is easy to understand, readable, and easy to write; it uses common terms from desktop publishing.
Regardingborder-colorInitial definition of the shorthand propertyborder-colorand the corresponding longhand properties.
November 17, 1995Working Draft.
November 12, 1996Proposed for recommendation.
December 17, 1996Recommendation .
September 13, 2018Old specification, declared obsolete. -
Cascading Style Sheets Level 2 - Revision 1 Specification
This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.
Regardingborder-colorNo change to the properties defining the border color, except that they accept theinheritvalue.November 04, 1997Working Draft.March 24, 1998Proposed for recommendation.May 11, 1998Recommendation . -
CSS Logical Properties and Values Level 1
This specification module defines properties that indirectly define certain other properties depending on the writing mode: left to right, right to left, or top to bottom. They are useful in simple and generic style sheets, such as browser style sheets, but can also save a few lines of styles for documents containing both left-to-right and right-to-left text.
Regardingborder-colorIntroduction des propriétés logiques (prenant en charge le mode d'écriture en fonction de la langue).May 18, 2017Working Draft.
-
CSS Backgrounds and Borders Module Level 3
Level 3 of the specification also explains how to position the background relative to the background area, and how to crop it.
Regarding borders, the concept of image borders is introduced, as well as the ideas of rounded corners and box shadows.Regardingborder-colorNo changes directly concerning the properties defining the color of the borders, but numerous developments concerning the colors themselves (see our page on colors).August 02, 2002Working Draft.December 17, 2009Candidate Recommendation.
See also, about borders.
The W3C specification "CSS Backgrounds and Borders Module" covers everything related to borders and backgrounds, which is quite a lot. To make your search easier, we’ve listed the main related terms below.
Properties:
