CSS Outline

CSS Outline

CSS outlines are lines drawn outside an element’s border. Outlines are often used to highlight elements, especially for focus states and accessibility.

Unlike borders, outlines do not take up space and do not affect the layout.

Outline

To show an outline, you need an outline style. The outline can be solid, dotted, dashed, and more.

.box {
  outline-style: solid;
}

Common outline styles include solid, dashed, dotted, and double.

Outline Width

The outline-width property controls the thickness of the outline.

.box {
  outline-style: solid;
  outline-width: 3px;
}

Outline Color

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

.box {
  outline-style: solid;
  outline-width: 3px;
  outline-color: #1f4bd8;
}

Outline Shorthand

The outline shorthand combines width, style, and color in one line.

.box {
  outline: 3px solid #1f4bd8;
}

Outline Offset

The outline-offset property adds space between the border edge and the outline. This can create a clean “ring” effect.

.box {
  border: 2px solid #ddd;
  outline: 3px solid #1f4bd8;
  outline-offset: 4px;
}

Because outlines do not affect layout, outline offset is useful for focus rings and interactive elements.

Outline vs Border

• Borders take up space and affect layout
• Outlines do not take up space and do not affect layout
• Outlines can be offset to create a focus ring effect

Code Challenge

Goal: Add an outline focus effect to the button below.

HTML:

<button class="btn">Click me</button>

Task:

• Add a border to the button
• Add an outline with a visible color
• Use outline-offset to create a clean ring effect

Try a Solution:

.btn {
  padding: 10px 16px;
  border: 2px solid #ddd;
  background: #fff;
  border-radius: 10px;
}

.btn:focus {
  outline: 3px solid #1f4bd8;
  outline-offset: 3px;
}

What’s Next?

Next, you will learn how to style and control text using CSS text properties.