Export (0) Print
Expand All

border-color property

Specifies the border color of the object.

CSS Backgrounds and Borders Module Level 3, Section 4.1

 

Syntax

border-color: [ <color> | currentColor | transparent ] {1,4} | inherit

Property values

One to four of the first three of the following space-delimited values, or inherit.

color

A supported color value.

currentColor

The computed value of the color property.

transparent

Fully transparent. This keyword can be considered a shorthand for "transparent black" ("rgba(0,0,0,0)"), which is its computed value.

inherit

The value of this property is inherited from this object's parent.

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Valuesee individual properties

Standards information

Remarks

The border-color property is a shorthand for the following properties:

Up to four different colors can be specified in the following order: top, right, bottom, left.

  • If one color is supplied, it is used for all four sides.
  • If two colors are supplied, the first is used for the top and bottom, and the second is used for left and right.
  • If three colors are supplied, they are used for top, right and left, and bottom, respectively.

The border-color property does not render if the border-style property is set to none.

Some browsers do not recognize color names, but all browsers should recognize RGB color values and display them correctly.

Examples

The following example uses the border-color property to set the border color on different div elements.


<body>   
   <div class="green"></div>
   <div class="blue"></div>
   <div class="red"></div>
   <div class="yellow"></div>
   <div class="all"></div>
</body>

In the CSS below, the border colors for four different div elements are set using RGB, RGBA, HSL, and HSLA.

The border-color property applied to four div elements



.green {
   border-color: rgb(126, 187, 65);
}
.blue {
   border-color: rgba(47, 160, 217, 0.5);
}
.red {
   border-color: hsl(12, 86%, 55%);
}
.yellow {
   border-color: hsla(42, 99%, 53%, 0.7);
}


In the CSS below, each of the sides of the border for the element is set to a different color. The first value, sets the top border color, the second value sets the right border color, the third value sets the bottom border color, and the fourth value sets the left border color.

The border-color property applied to a div element


.all {
   border-color: #EF5027 #7EBB41 #2FA0D9 #FEB912;
}

See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style
border
border-top-color
border-right-color
border-bottom-color
border-left-color

 

 

Show:
© 2014 Microsoft