Border line color
border-color
Set the color used to draw the element's border line.
Property values
This property is used to set each of these four border color properties, which may also be set one by one:
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
This property expects anywhere from one to four values, with their interpretation as follows:
| number of values | sides effected |
|---|---|
| 1 value | Sets all four sides: top, right, bottom, left |
| 2 values | 1st value: top and bottom edges 2nd value: right and left edges |
| 3 values | 1st value: top edge 2nd value: right and left edges 3rd value: bottom edge |
| 4 values | 1st value: top edge 2nd value: right edge 3rd value: bottom edge 4th value: left edge |
Specify the border colors using any one of these color value formulas:
| formula | red | green | blue |
|---|---|---|---|
| 'currentColor' | Use the text's color | ||
| 6-digit hex | #ff0000 | #00ff00 | #0000ff |
| 3-digit hex | #f00 | #0f0 | #00f |
| RGB | rgb(255,0,0) | rgb(0,255,0) | rgb(0,0,255) |
| RGBA | rgb(255,0,0,1.0) | rgb(0,255,0,1.0) | rgb(0,0,255,1.0) |
| HSL | hsl(0,100,50) | hsl(120,100,50) | hsl(240,100,50) |
| HSLA | hsla(0,100,50,1.0) | hsla(120,100,50,1.0) | hsla(240,100,50,1.0) |
| CSS names | aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow * | ||
The fourth item of the RGBA and HSLA formulas is a transparency/opacity value, from 0.0 (fully transparent) to 1.0 (fully opaque).
* Only the first 16 standard CSS colors are listed. There are 124 more defined in the X11 color standard.
Examples
/* the top and bottom edges are black, the right and left edges are gray */
border-color: black gray;