View video tutorial

CSS Outline Color

CSS

This specifies the color of outline.

CSS outline-color property

The outline-color property specifies the color of the outline of an element.

Any format of color value can be assigned to the outline-color property.

Example

.p1 {
  outline-width: 5px;
  outline-style: solid;
  outline-color: red;
  outline-offset: 1px;
  border: 2px solid black;
}
.p2 {
  outline-width: 5px;
  outline-style: solid;
  outline-color: #32b853;
  outline-offset: 1px;
  border: 2px solid black;
}
.p3 {
  outline-width: 5px;
  outline-style: solid;
  outline-color: rgb(134, 1, 134);
  outline-offset: 1px;
  border: 2px solid black;
}
.p4 {
  outline-width: 5px;
  outline-style: solid;
  outline-color: hsl(207, 97%, 31%);
  outline-offset: 1px;
  border: 2px solid black;
}
Try it Now »

Click on the "Try it Now" button to see how it works.

Note: Outline color can not be set each side separately.