What is the CSS Outline?

The outline property draws a line around an element, outside the border. At first glance, outlines look similar to borders, but they have crucial differences that make them essential for accessibility.

CSS

.element {
  outline: 2px solid blue;
}

Outline vs Border: Key Differences

1. Outlines Don't Affect Layout

Borders add to an element's total size. Outlines do not — they're drawn on top of the page without taking up space:

CSS

.with-border {
  border: 5px solid red;
  /* Element is now 10px wider and taller */
}

.with-outline {
  outline: 5px solid red;
  /* Element size unchanged — outline floats above */
}

2. Outlines Can't Have Rounded Corners (Traditionally)

CSS

.box {
  border-radius: 10px;
  border: 2px solid blue;    /* Rounded */
  outline: 2px solid red;    /* Rectangular (traditionally) */
}

Note: Modern browsers now support outline following border-radius in many cases, but support varies.

3. Outlines Are Always the Same on All Sides

You cannot set different outlines for different sides like you can with borders:

CSS

/* This works with borders */
.box {
  border-top: 2px solid red;
  border-left: 4px solid blue;
}

/* NOT possible with outlines */
.box {
  outline-top: 2px solid red; /* Invalid! */
}

4. Outlines Can Be Offset

Outlines support the outline-offset property to add space between the outline and the element:

CSS

.button:focus {
  outline: 2px solid blue;
  outline-offset: 4px; /* Gap between element and outline */
}

Outline Syntax

CSS

/* outline: width style color */
.element {
  outline: 2px solid #3498db;
}

Individual Properties

CSS

.element {
  outline-width: 2px;
  outline-style: solid;
  outline-color: #3498db;
  outline-offset: 2px;
}

Outline Styles

CSS

.solid { outline-style: solid; }
.dashed { outline-style: dashed; }
.dotted { outline-style: dotted; }
.double { outline-style: double; }
.groove { outline-style: groove; }
.ridge { outline-style: ridge; }
.inset { outline-style: inset; }
.outset { outline-style: outset; }

Outlines and Accessibility

The primary use of outlines is for focus indicators — visual feedback showing which element is currently focused during keyboard navigation.

Why Focus Indicators Matter

When users navigate with keyboards (Tab key) or assistive technologies, they need to see which element is active. Without visible focus, keyboard users are essentially blind to their position on the page.

Default Browser Focus

Browsers provide default focus outlines:

CSS

/* Chrome/Safari default (approximately) */
:focus {
  outline: -webkit-focus-ring-color auto 1px;
}

/* Firefox default (approximately) */
:focus {
  outline: 1px dotted;
}

The Danger of outline: none

One of the worst accessibility mistakes is removing focus outlines without providing an alternative:

CSS

/* NEVER DO THIS */
*:focus {
  outline: none;
}

/* This makes your site unusable for keyboard users */

If You Must Remove Default Outlines

Always provide a visible alternative:

CSS

/* Remove default, add custom */
.button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.5);
}

Modern Focus Styling with :focus-visible

The :focus-visible pseudo-class applies focus styles only when the browser determines focus should be visible (typically keyboard navigation, not mouse clicks):

CSS

/* Only shows focus ring for keyboard users */
.button:focus-visible {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* Remove outline for mouse users who don't need it */
.button:focus:not(:focus-visible) {
  outline: none;
}

This is the modern best practice — keyboard users see focus indicators, mouse users don't see unnecessary outlines.

Custom Focus Styles

Enhanced Outline

CSS

a:focus-visible {
  outline: 2px solid #3498db;
  outline-offset: 3px;
  border-radius: 2px;
}

Box Shadow Focus Ring

CSS

.input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.4);
}

Combined Approach

CSS

.button:focus-visible {
  outline: 2px solid #3498db;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.3);
}

High Contrast Focus

CSS

/* For better visibility on any background */
.link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  background-color: yellow;
  color: black;
}

outline-offset Deep Dive

outline-offset creates space between the element and its outline:

CSS

/* Positive offset: outline moves outward */
.element {
  outline: 2px solid blue;
  outline-offset: 4px;
}

/* Negative offset: outline moves inward (overlaps element) */
.element {
  outline: 2px solid blue;
  outline-offset: -4px;
}

Creative Uses

CSS

/* Inner glow effect */
.card:focus-within {
  outline: 2px solid rgba(52, 152, 219, 0.5);
  outline-offset: -6px;
}

/* Spacious focus ring */
.big-button:focus-visible {
  outline: 3px solid #e74c3c;
  outline-offset: 6px;
}

Focus Within for Parent Elements

:focus-within applies styles to a parent when any child has focus:

CSS

.search-box {
  border: 2px solid #ddd;
  transition: all 0.2s;
}

.search-box:focus-within {
  border-color: #3498db;
  outline: 2px solid rgba(52, 152, 219, 0.3);
  outline-offset: 2px;
}

Testing Focus Visibility

To test your focus styles:

Unplug your mouse (or don't touch it)
Press Tab to navigate through your page
Every interactive element should have a clearly visible focus indicator
You should always know where you are on the page

Key Takeaways

Outlines don't affect layout — they're drawn on top
Never remove focus outlines without a visible alternative
Use :focus-visible for keyboard-only focus styles
outline-offset adds space between element and outline
Test your site with keyboard-only navigation
Proper focus indicators are not optional — they're essential for accessibility

This connects directly to the accessibility concepts covered in CSS for Screen Readers and the broader principles of inclusive design.