CSS Outline

CSS outline is an additional border around HTML elements which is drawn outside their borders to make the element "stand out". Since the outlines are drawn outside any HTML element's border, it might overlap other contents.

CSS outline is specified using the CSS properties as listed below.

1. outline-style
2. outline-color
3. outline-width
4. outline-offset

Outline Style

The outline-style property is identical to the border-style property and specifies the style of the outline which can have any one of the following values.

In the table above, each description cell content have a red border while each of the outline style are also displayed in default text color.

p{
  border: 1px solid red;
  outline-style: ridge;
}

Outline Color

The outline-color property is used to set the color of the outline where the color can be set using its name, RGB as well as HEX value. The value invert can also be used which performs a color inversionand ensures the outline is visible regardless of the background. None of the CSS outline properties work unless the outline-style is specified though.

p{
  border: 1px solid red;
  outline-style: solid;
  outline-color: invert;
}

Outline Width

The outline-width property specifies the width of the outline which can have a specific size in (px, pt, cm, em, etc) or one of the thin (1px), medium (3px) or thick (5px) value.

p{
  border: 1px solid red;
  outline-style: solid;
  outline-color: invert;
  outline-width: medium;
}

CSS Outline - Shorthand property

The outline property is a shorthand property for setting all CSS outline properties in one line.

p{
  outline: 5px ridge red;
}

Outline Offset

The outline-offset property can be used to add space between an outline and the border of an HTML element. The space between an element and its outline is transparent.

Hello World

<p><span>Hello World</span></p>
<style>
p span{
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
</style>

0 Like 0 Dislike 0 Comment Share Tweet