totn CSS

CSS: border-color property

This CSS tutorial explains how to use the CSS property called border-color with syntax and examples.

Description

The CSS border-color property defines the color of the border of a box.

Syntax

The CSS border-color property can be expressed with one, two, three or four values provided.

Syntax - One Value

The syntax for the CSS border-color property (with 1 value) is:

border-color: all;

When one single value is provided, the border-color value will apply to all four sides of the box (ie: top, right, bottom, left).

Syntax - Two Values

The syntax for the CSS border-color property (with 2 values) is:

border-color: top_bottom left_right;

When two values are provided, the first value will apply to the top and bottom of the box. The second value will apply to the left and right sides of the box.

Syntax - Three Values

The syntax for the CSS border-color property (with 3 values) is:

border-color: top right_left bottom;

When three values are provided, the first value will apply to the top of the box. The second value will apply to the right and left sides of the box. The third value will apply to the bottom of the box.

Syntax - Four Values

The syntax for the CSS border-color property (with 4 values) is:

border-color: top right bottom left;

When four values are provided, the first value will apply to the top of the box. The second value will apply to the right side of the box. The third value will apply to the bottom of the box. The fourth value will apply to the left side of the box.

The top, right, bottom, and left border-color values can be one of the following:

Value Description
#RRGGBB Hexadecimal representation of the border-color
p { border-color: #FF0000; }
rgb() RGB representation of the border-color
p { border-color: rgb(255,0,0); }
name Name of the border-color (ie: red, blue, black, white)
p { border-color: red; }
transparent Border is not displayed but still takes up space on the page
p { border-color: transparent; }
inherit Element will inherit the border-color from its parent element
p { border-color: inherit; }

Note

Browser Compatibility

The CSS border-color property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the border-color property below, exploring examples of how to use this property in CSS with 1, 2, 3, or 4 values. 

div { border-color: #FF0000; border-style: solid; }

In this CSS border-color example, we have provided one value of #FF0000 which would apply to all 4 sides of the box. Be sure to apply a border-style so that the border appears.

Next, we'll look at a CSS border-color example where we provide two values.

div { border-color: #FF0000 black; border-style: solid; }

In this CSS border-color example, we have provided two values. The first value of #FF0000 would apply to the top and bottom of the box. The second value of black would apply to the left and right sides of the box.

Next, we'll look at a CSS border-color example where we provide three values.

div { border-color: blue red yellow; border-style: solid; }

In this CSS border-color example, we have provided three values. The first value of blue would apply to the top of the box. The second value of red would apply to the right and left sides of the box. The third value of yellow would apply to the bottom of the box.

Next, we'll look at a CSS border-color example where we provide four values.

div { border-color: rgb(0,0,0) yellow #CCCCCC #D3D3D3; border-style: solid; }

In this CSS border-color example, we have provided four values. The first value of rgb(0,0,0) would apply to the top of the element. The second value of yellow would apply to the right side of the box. The third value of #CCCCCC would apply to the bottom of the box. The fourth value of #D3D3D3 would apply to the left side of the box.

Share on: