iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

CSS Outline

By · Reviewed & last updated · Part of CSS Tutorial

Outline draws a line around an element WITHOUT affecting its layout. The classic use is the focus ring for keyboard users.

Outline vs border

EXAMPLE
/* outline does NOT take up space - it sits on top of the box */
.button {
  border: 2px solid #ddd;
  padding: 0.5rem 1rem;
}
.button:focus {
  outline: 2px solid #2563eb;       /* visible focus ring */
  outline-offset: 2px;              /* small gap between border and ring */
}

/* Accessibility: NEVER remove the focus outline without a replacement */
/* BAD */
button:focus { outline: none; }     /* keyboard users lose all feedback */

/* GOOD: use :focus-visible to show ring only on keyboard, not click */
button:focus { outline: none; }
button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 6px;
}

/* outline can be dashed, dotted, double, etc. */
.debug {
  outline: 1px dashed red;          /* great for debugging layout */
}

/* outline-style: auto draws the browser's native ring (system look) */
button:focus-visible { outline: auto; }

/* The full shorthand */
.input:focus {
  outline: 2px dashed #16a34a;
  outline-offset: 4px;
}

/* Difference from border in one example */
.demo {
  width: 100px;
  height: 100px;
  background: #e5e7eb;
}
.demo.border  { border: 10px solid red; }      /* element becomes 120x120 */
.demo.outline { outline: 10px solid red; }     /* element STAYS 100x100, ring extends beyond */

/* Combine outline with box-shadow for double rings */
.fancy:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #2563eb;
}

Why it matters

The focus outline is a critical accessibility affordance. Use :focus-visible to show it only on keyboard navigation, never `outline: none` without a replacement. For debugging, a temporary `outline: 1px dashed red` shows you exactly where boxes are without shifting layout.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>

<h1>CSS Outline</h1>
<div class="box">Edit the CSS on the left, then click Run &raquo;</div>

</body>
</html>
Try it Yourself »

Exercise

Push the outline 3px away from the border.

button:focus-visible { outline: 2px solid #04AA6D; outline- : 3px; }

Test yourself

Q1. Does an outline add to an element's size?
Q2. Which property pushes the outline a few pixels away from the border?
Q3. Why is removing the focus outline without a replacement bad?

Discussion

Loading…