border-color
Quick Summary for border-color
Code Usage for border-color
/* <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,.7) green; /* top | right | bottom | left */ border-color: red yellow green blue; /* Global values */ border-color: inherit; border-color: initial; border-color: revert; border-color: unset;
More Details for border-color
border-color
The border-color
shorthand CSS property sets the color of an element's border.
Each side can be set individually using border-top-color
, border-right-color
, border-bottom-color
, and border-left-color
; or using the writing mode-aware border-block-start-color
, border-block-end-color
, border-inline-start-color
, and border-inline-end-color
.
You can find more information about border colors in Borders in Applying color to HTML elements using CSS.
Constituent properties
This property is a shorthand for the following CSS properties:
border-bottom-color
border-left-color
border-right-color
border-top-color
Syntax
/* <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,.7) green; /* top | right | bottom | left */ border-color: red yellow green blue; /* Global values */ border-color: inherit; border-color: initial; border-color: revert; border-color: unset;
The border-color
property may be specified using one, two, three, or four values.
Values
<color>
Defines the color of the border.
Formal definition
Initial value | as each of the properties of the shorthand:border-top-color : currentcolor border-right-color : currentcolor border-bottom-color : currentcolor border-left-color : currentcolor |
---|---|
Applies to | all elements. It also applies to ::first-letter . |
Inherited | no |
Computed value | as each of the properties of the shorthand:border-bottom-color : computed colorborder-left-color : computed colorborder-right-color : computed colorborder-top-color : computed color |
Animation type | as each of the properties of the shorthand:border-bottom-color : a colorborder-left-color : a colorborder-right-color : a colorborder-top-color : a color |
Formal syntax
<color>{1,4}where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
where
<alpha-value> = <number> | <percentage><hue> = <number> | <angle>
Examples
Complete border-color usage
HTML<div id="justone"> <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 id="horzvert"> <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 id="topvertbott"> <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 id="trbl"> <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 #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; }
ResultSpecifications
Specification |
---|
CSS Logical Properties and Values Level 1 # logical-shorthand-keyword |
CSS Backgrounds and Borders Module Level 4 # border-color |
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
, and column-rule-color
Applying color to HTML elements using CSS Last modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Polski中文 (简体) Change language