Loading lesson path

CSS•CSS Foundations

CSS Outline Offset

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind CSS Outline Offset?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

___: 30px;

3Order

Put the learning moves in the order that makes the concept easiest to apply.

All CSS Outline Properties

CSS Outline Offset with Negative Value

CSS Outline Offset

The outline-offset property adds a 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 a black border and a red outline 15px outside the border edge.

Example

Formatted code

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

Live preview

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

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

Example

Formatted code

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

Live preview