IMG-LOGO
Home Course Outline Color in CSS

Outline Color in CSS

by MH RISHAD - 25 Dec 2020
IMG

The outline-color property is utilized to set the color of the layout.

The color can be set by:

  • name - specify a color name, like "red"
  • HEX - specify a hex value, like "#ff0000"
  • RGB - specify a RGB value, like "rgb(255,0,0)"
  • HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
  • invert - performs a color inversion (which ensures that the outline is visible, regardless of color background)

The following example shows some different outlines with different colors. Also notice that these elements also have a thin black border inside the outline:

A solid red outline.

A dotted blue outline.

An outset grey outline.

Example

.ex1 {
  border
: 3px solid black;
  outline-style
: solid;
  outline-color
: green;
}

.ex2 
{
  border
: 3px solid black;
  outline-style
: dotted;
  outline-color
: red;
}

.ex3 
{
  border
: 3px solid black;
  outline-style
: outset;
  outline-color
: black;
}

Share:

Leave a Comment

Required fields are marked *