Login
  • CSS
  • Outline Offset

CSS Outline Offset

CSS Outline Offset

The outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.

The following example specifies an outline 15px outside the border edge:

This paragraph has an outline 15px outside the border edge.

Example

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

The following example shows that the space between an element and its outline is transparent:

This paragraph has an outline of 15px outside the border edge.

Example

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

Test Yourself With Exercises

Exercise:

Set a solid, 5px outline border for the

element.







Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.

All CSS Outline Properties

Property Description
A shorthand property for setting outline-width, outline-style, and outline-color in one declaration
Sets the color of an outline
Specifies the space between an outline and the edge or border of an element
Sets the style of an outline
Sets the width of an outline

Outline Offset
Login
ADS CODE