CSS Outline

button:focus {
  outline: 2px solid white;
  outline-offset: 4px;
}

Have you ever clicked on a button or tabbed into an input field and seen a blue glow or ring appear around it that you did not add yourself?

That is the browser adding an outline automatically. It is trying to be helpful — showing keyboard users where they currently are on the page. But it rarely matches your design and most developers end up removing it.

Let us understand what outline actually is and how to use it properly.

Outline vs Border — What is the Difference

They look similar but they behave very differently.

Border is part of the box model. It sits between the padding and the margin. Adding a border makes the element bigger and can shift things around.

Outline sits completely outside the border. It does not take up any space. Adding or removing an outline never moves anything on the page. Nothing shifts. Nothing gets bigger or smaller.

Think of it like this. A border is like a picture frame permanently attached to the photo. It is part of the photo's size. An outline is like someone holding a glowing ring around the frame from outside. The frame and photo are untouched. The ring just floats there.

How to Write an Outline

The syntax is identical to border. You write the width, the style, and the color.

A white ring appears around the button sitting just outside its edges. The button itself did not change size. Nothing moved. The outline just appeared outside it.

Here is what is happening.

• outline: 3px solid white — exactly like border syntax. 3px is the thickness. solid is the line style. white is the color. The outline floats outside the element without affecting the layout at all.

outline-offset

By default the outline sits right against the element's edge. outline-offset pushes it outward giving it breathing room.

Now there is a small gap between the button and the outline ring. It feels like the ring is floating around the button rather than pressed against it. Clean and intentional.

• outline-offset: 4px — pushes the outline 4px away from the element's edge on all sides. You can also use negative values to pull the outline inward — useful for creating inset ring effects.

The Most Common Use — Custom Focus Styles

Here is why outline actually matters in real projects.

Every browser adds a default focus outline to interactive elements — buttons, inputs, links, anything you can tab to with a keyboard. It is there for accessibility. Blind users and keyboard-only users rely on it to know where they are.

The problem is the default outline is usually a thick blue glow that looks terrible on custom designs. So developers write outline: none to remove it.

But here is the thing — removing it without replacing it is a serious accessibility problem. Keyboard users are now completely lost on your page.

The right approach is to remove the default and replace it with something that fits your design.

Click into the input or tab to the button. A clean white ring appears. Move away and it disappears.

Here is what is happening step by step.

• outline: none on input and button — removes the browser default. No more ugly blue glow.
• input:focus and button:focus — applies our custom outline only when the element is focused. Not all the time. Just when the user is actively on it.
• outline: 2px solid white — a clean thin white ring. Visible against the dark background. Matches the overall design.
• outline-offset: 2px on input — a small gap between the input border and the outline ring. Keeps them visually separate.
• outline-offset: 4px on button — a slightly larger gap on the button since it has a solid background. The ring floats more visibly around it.

Outline Does Not Respect Border Radius

Here is one quirk worth knowing. Unlike border the outline does not follow border-radius. If you have a rounded button with border-radius: 4px the border curves with it. The outline stays square.

The button is fully pill shaped but the outline is a rectangle around it. The mismatch looks a little odd on heavily rounded elements.

The fix most developers use is to switch from outline to box-shadow for focus styles on rounded elements. Box-shadow does follow border-radius.

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px white;
}

box-shadow: 0 0 0 3px white — zero horizontal offset, zero vertical offset, zero blur, 3px spread. This creates a solid ring that hugs the rounded corners perfectly. It looks exactly like an outline but follows the border-radius.