CSS Border-Style Property



CSS Tutorial  >  Border  >  Border-color

The border-color property defines the color of the border. This property takes values in the following forms:

  • Transparent
  • Hexadecimal code
  • Color name
  • RGB
  • RGBa
  • HSL
  • HSLa

Both RGB and HSL use three numbers to determine the color. RGBa and HSLa add a fourth number to indicate the level of transparency, with 0 being fully transparent, and 1 being fully opaque.

The syntax for the border-color property is as follows:

Transparent:

{border-color: transparent;}

Hexadecimal code:

{border-color: #XXXXXX;} where XXXXXX is a hexadecimal code.

Color name:

{border-color: [color_name];} where color_name denotes the name of the color in plain English.

RGB:

{border-color: rgb (X, Y, Z); }   where X, Y, and Z are numbers between 0 and 255.
    OR
{border-color: rgb (X%, Y%, Z%); }   where X, Y, and Z are numbers between 0 and 100.

RGBa:

{border-color: rgba (X, Y, Z, A); }   where X, Y, and Z are numbers between 0 and 255, and A is a number between 0 and 1.
    OR
{border-color: rgba (X%, Y%, Z%, A); }   where X, Y, and Z are numbers between 0 and 100, and A is a number between 0 and 1.

HSL:

{border-color: hsl (X, Y%, Z%); }   where X is a number between 0 and 360, Y and Z are numbers between 0 and 100.

HSLa:

{border-color: hsla (X, Y%, Z%, A); }   where X is a number between 0 and 360, Y and Z are numbers between 0 and 100, and A is a number between 0 and 1.

The default border-color value is black.

The border-color property itself is a short hand for the following properties:

  • border-left-color
  • border-right-color
  • border-top-color
  • border-bottom-color

There can be one, two, three, or four values set for the border-color property. The rules are as follows:

  • one value: the color applies to all four borders.
  • two values: the first color applies to the top border and the bottom border, and the second color applies to the left border and the right border.
  • three values: the first color applies to the top border, the second color applies to the left border and the right border, and the third color applies to the bottom border.
  • four values: the first color applies to the top border, the second color applies to the right border, the third color applies to the bottom border, and the fourth color applies to the left border.
Example 1: Multiple border colors

CSS Declaration

border-style: solid;
border-color: red green blue;

which results in the following:

In Example 1, three border colors are defined. So the first color (red) applies to the top border, the second color (green) applies to the left and right borders, and the third color (blue) applies to the bottom border.

Next: CSS Border-Width




Copyright © 2017   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact