Outline Color

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

Outline color

The outline-color property set the color of the outline.

The color is used to set by:

  • name – defines the color name, like “red”
  • HEX – defines the hex value, like “#ff0000”
  • RGB – defines the RGB value, like “rgb(255,0,0)”
  • HSL – defines the HSL value, like “hsl(0, 100%, 50%)”
HTML
				
					<h2>The outline-color Property</h2>
<p>The outline-color property is used to set the color of the outline.</p>
<p class="ex1">A solid outline.</p>
<p class="ex2">A dotted outline.</p>
<p class="ex3">An outset outline.</p>
CSS
				
					p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}

p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

Output

outline color