border-color property - Script Tutorials

Contents

Definition and Usage
Syntax
Values
Examples
HTML Content
CSS Content
Compatibility
Desktop browsers
Mobile browsers

Definition and Usage

The border-color CSS property is a shorthand for setting the color of the four sides of an element’s border: border-top-color, border-right-color, border-bottom-color, border-left-color

Initialthe concatenation of the initial values of its longhand properties:
- border-top-color: currentColor
- border-right-color: currentColor
- border-bottom-color: currentColor
- border-left-color: currentColor
Applies toall elements
Inheritedno
Mediavisual
Computed Valueas each of the properties of the shorthand:
- border-bottom-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn’t, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
- border-left-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn’t, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
- border-right-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn’t, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
- border-top-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn’t, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
Animatableas each of the properties of the shorthand:
- border-bottom-color: yes, as a color
- border-left-color: yes, as a color
- border-right-color: yes, as a color
- border-top-color: yes, as a color
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: <color>{1,4}

border-color:  color                 /* one-value syntax */
border-color:  horizontal vertical   /* two-value syntax */
border-color:  top vertical bottom   /* three-value syntax */
border-color:  top right bottom left /* four-value syntax */
border-color:  inherit

Values

color: Is a <color> denoting the color to apply to all four edges. It is used only in the one-value syntax.
horizontal: Is a <color> denoting the color to apply to all horizontal edges, that is the top and bottom edges. It is used only in the two-value syntax.
vertical: Is a <color> denoting the color to apply to all vertical edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.
top: Is a <color> denoting the color to apply to the top edge. It is used only in the three- and four-value syntaxes.
bottom: Is a <color> denoting the color to apply to the bottom edge. It is used only in the three- and four-value syntaxes.
right: Is a <color> denoting the color to apply to the top edge. It is used only in the four-value syntax.
left: Is a <color> denoting the color to apply to the top edge. It is used only in the four-value syntax.
inherit: Is a keyword indicating that all four values are inherited from their parent’s element calculated value.

Examples

HTML Content

<div id="example_border_box"> 
  
<p>This is a box with a border around it.</p> 
  
</div>

CSS Content

#example_border_box { 
  
  border-style: ridge dashed solid; 
  
  /* Equivalent to: 
  
     border-top-style: ridge; 
  
     border-right-style: dashed; 
  
     border-bottom-style: solid; 
  
     border-left-style: dashed; 
  
  */ 
  
  border-color: orange blue; 
  
  /* Equivalent to: 
  
     border-top-color: orange; 
  
     border-right-color: blue; 
  
     border-bottom-color: orange; 
  
     border-left-color: blue; 
  
  */ 
  
}