Outline color
outline-color
Set the color used to draw the element's outline ("outside-the-box" border).
Property values
Unlike many other similar properties, the outline-color property does not have corresponding top, right, bottom and left properties. Outline-color rules can only be set for all four sides at once.
Specify the outline color using any one of these color value formulas:
| formula | red | green | blue |
|---|---|---|---|
| 'currentColor' | Use the text's color | ||
| 'invert' | Invert the background 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
outline-color: yellow;