border-color
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Theborder-colorshorthandCSS property sets the color of an element's border.
Try it
border-color: red;border-color: red #32a1ce;border-color: red rgb(170 50 220 / 0.6) green;border-color: red yellow green hsl(60 90% 50% / 0.8);border-color: red yellow green transparent;<section> <div> This is a box with a border around it. </div></section>#example-element { background-color: #eeeeee; color: black; border: 0.75em solid; padding: 0.75em; width: 80%; height: 100px;}Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
css
/* <color> values */border-color: red;/* top and bottom | left and right */border-color: red #f015ca;/* top | left and right | bottom */border-color: red rgb(240 30 50 / 70%) green;/* top | right | bottom | left */border-color: red yellow green blue;/* Global values */border-color: inherit;border-color: initial;border-color: revert;border-color: revert-layer;border-color: unset;Theborder-color property may be specified using one, two, three, or four values.
- Whenone value is specified, it applies the same color toall four sides.
- Whentwo values are specified, the first color applies to thetop and bottom, the second to theleft and right.
- Whenthree values are specified, the first color applies to thetop, the second to theleft and right, the third to thebottom.
- Whenfour values are specified, the colors apply to thetop,right,bottom, andleft in that order (clockwise).
Values
<color>Defines the color of the border.
Description
Each side can be set individually usingborder-top-color,border-right-color,border-bottom-color, andborder-left-color; or using the writing mode-awareborder-block-start-color,border-block-end-color,border-inline-start-color, andborder-inline-end-color.
You can find out more information about border colors inApplying colors to HTML elements.
Formal definition
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Applies to | all elements. It also applies to::first-letter. |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand: |
Formal syntax
border-color =
[<color>|<image-1D>]{1,4}
<image-1D> =
<stripes()>
<stripes()> =
stripes(<color-stripe>#)
<color-stripe> =
<color>&&
[<length-percentage>|<flex>]?
<length-percentage> =
<length>|
<percentage>
Examples
Complete border-color usage
HTML
html
<div> <p><code>border-color: red;</code> is equivalent to</p> <ul> <li><code>border-top-color: red;</code></li> <li><code>border-right-color: red;</code></li> <li><code>border-bottom-color: red;</code></li> <li><code>border-left-color: red;</code></li> </ul></div><div> <p><code>border-color: gold red;</code> is equivalent to</p> <ul> <li><code>border-top-color: gold;</code></li> <li><code>border-right-color: red;</code></li> <li><code>border-bottom-color: gold;</code></li> <li><code>border-left-color: red;</code></li> </ul></div><div> <p><code>border-color: red cyan gold;</code> is equivalent to</p> <ul> <li><code>border-top-color: red;</code></li> <li><code>border-right-color: cyan;</code></li> <li><code>border-bottom-color: gold;</code></li> <li><code>border-left-color: cyan;</code></li> </ul></div><div> <p><code>border-color: red cyan black gold;</code> is equivalent to</p> <ul> <li><code>border-top-color: red;</code></li> <li><code>border-right-color: cyan;</code></li> <li><code>border-bottom-color: black;</code></li> <li><code>border-left-color: gold;</code></li> </ul></div>CSS
css
#justone { border-color: red;}#horzvert { border-color: gold red;}#topvertbott { border-color: red cyan gold;}#trbl { border-color: red cyan black gold;}/* Set width and style for all divs */div { border: solid 0.3em; width: auto; margin: 0.5em; padding: 0.5em;}ul { margin: 0; list-style: none;}Result
Specifications
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # logical-shorthand-keyword |
| CSS Backgrounds and Borders Module Level 3 # border-color |
Browser compatibility
See also
- Border-color related CSS properties:
border,border-top-color,border-right-color,border-bottom-color,border-left-color, - Other border-related CSS properties:
border-width,border-style - The
<color>data type - Other color-related properties:
color,background-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow,caret-color, andcolumn-rule-color - Applying color to HTML elements using CSS