CSS Outline: outline, outline-offset and Focus Rings

The CSS outline property draws a line outside an element's border without taking up space. Learn outline style, width, color, outline-offset and accessible focus rings.

What is a CSS outline?

An outline is a line drawn around the outside of an element, just beyond its border. It looks a lot like a border, but it works differently: an outline doesn't take up any space. Adding or removing it never moves other elements. Think of it as a highlighter pen drawn around a box, not a frame built into it.

Browsers use outlines to show focus. When you press the Tab key to move through links, buttons and form fields, the focused element gets an outline (the "focus ring"). It tells keyboard users where they are on the page, like a cursor.

What is the difference between outline and border?

	Border	Outline
Takes up space in the box model	Yes, it adds to the size	No, it is drawn on top
Can style each side separately	Yes (border-left and so on)	No, always all four sides
Follows border-radius	Yes	Yes, in all modern browsers
Can be moved away from the box	No	Yes, with outline-offset
Typical use	Design: cards, dividers, frames	Focus rings, debugging

Because outlines don't change the layout, they are perfect for things that appear and disappear, like focus states. A border that appears on focus would make the element grow and push its neighbors around.

Outline style, width, color and offset

The outline properties look just like border properties:

• outline-style: solid, dashed, dotted, double, groove, ridge, inset, outset, none, or auto (the browser's default focus style).
• outline-width: a length such as 3px, or thin, medium, thick.
• outline-color: any color. The default is currentColor in modern browsers.
• outline-offset: the gap between the border edge and the outline. Positive values push it outward; negative values pull it inside the box.

The outline shorthand combines width, style and color: outline: 3px solid #f59e0b;. Note that outline-offset is not part of the shorthand, so you always write it separately.

<button class="btn">Subscribe</button>
<a class="link" href="/pricing">See pricing</a>

.btn {
  padding: 10px 20px;
  background: #4f46e5;
  color: white;
  border: none;
  border-radius: 8px;
}

.btn:focus-visible,
.link:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

Click the page, then press Tab. When the button gets focus, a thick orange ring appears around it with a 3px gap, and the ring has rounded corners that follow the button's shape. The link gets the same ring. Nothing on the page moves when the ring appears.

Why you should never remove focus outlines

You may see code like *:focus { outline: none; } in old tutorials. People wrote it because they didn't like the ring appearing when they clicked a button with the mouse. But for someone who uses a keyboard (because of a disability, an injury, or just preference), removing the ring is like hiding the mouse pointer. They can no longer see what they're about to activate. It also fails the WCAG accessibility guidelines.

The modern solution is :focus-visible. The browser applies it only when focus should be visible, which mostly means keyboard use. Mouse clicks on buttons usually don't trigger it. So you get a clean look for mouse users and a clear ring for keyboard users, without removing anything.

/* Bad: hides focus for everyone */
/* button:focus { outline: none; } */

/* Good: a custom, strong focus ring */
:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

This one global rule gives every link, button and field a consistent blue focus ring when you use the keyboard.

Common mistake: Removing the outline and replacing it with only a slight color change, like a slightly darker button. That is too subtle for many people to notice. A good focus indicator is thick (at least 2px), has strong contrast with the background, and surrounds the element.

A focus ring that works on any background

A single-color ring can disappear on a background of the same color. A smart trick is to combine an outline with a box-shadow of a different color, so the ring is visible on both light and dark areas:

<div class="hero">
  <a class="cta" href="/start">Start free trial</a>
</div>

.hero {
  padding: 40px;
  background: #1e3a8a;
}

.cta {
  display: inline-block;
  padding: 12px 24px;
  background: white;
  color: #1e3a8a;
  border-radius: 8px;
  text-decoration: none;
}

.cta:focus-visible {
  outline: 3px solid white;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #1e3a8a, 0 0 0 9px #fbbf24;
}

When you tab to the button, you see a small dark gap around it, then a white ring (the outline), then a yellow ring outside that (the second shadow, which reaches past the outline). At least one of these colors stands out against any background. For form fields, a negative offset like outline-offset: -2px keeps the ring inside the field, which helps when fields sit close together.

Tip: Outlines are also a great debugging tool. Write * { outline: 1px solid red; } to see the edges of every box without changing the layout. Remove it when you're done.

Practice exercise

Make a small signup form with a name field, an email field, a checkbox and a submit button. Give all of them one shared :focus-visible style with a 3px outline and an offset. Then press Tab through the form and check that you can always see where you are. Try a negative offset on the text fields.

Hint: put the form on a colored background and check that the focus ring still has good contrast.

Key takeaways

• An outline is drawn outside the border and never takes up space or moves other elements.
• The outline shorthand sets width, style and color; outline-offset is set separately.
• Unlike borders, outlines can't be styled per side, but they can be moved away with an offset.
• Never remove focus outlines without a strong visible replacement.
• Use :focus-visible to show focus rings for keyboard users without bothering mouse users.