border vs outline — the difference, and why a hover border makes everything jump

You're building a grid of cards. You want a card to light up with a border on hover:

.card:hover { border: 2px solid #D4A373; }

Hover — and the whole row twitches. The card got 4 pixels wider and taller, the neighbours shifted. Move the mouse away — everything jumps back.

Now change one word:

.card:hover { outline: 2px solid #D4A373; }

Same highlight. Nothing jumps. Here's the trick: border is part of the element itself, while outline is drawn on top of the page and takes no space.

The main difference in one line

border is the wall of the box. It counts toward the element's size and pushes neighbours away.

outline is a marker line drawn around the box. You can see it, but layout doesn't know it exists.

This follows straight from the box model: an element has content, padding, a border and margin. outline isn't on that list at all.

"But I have box-sizing: border-box!" you'll say. With it, the card's outer size really doesn't change: the border goes inside the set width. But the room inside shrinks by the same 4 pixels. Text that barely fit on one line wraps onto a second — and the card grows taller. The jump didn't go away; it just moved inside. outline touches neither the outside nor the inside.

Side by side

1. Does it affect size and neighbours

• border — yes. Add 2 pixels and the element grows by 4 on each axis.
• outline — no. Toggle it every frame if you like; nothing moves.

2. Can you set just one side

• border — yes: border-bottom, border-left and so on. A tab's underline is a border-bottom.
• outline — no. Only the whole outline, all four sides.

3. Rounded corners

• border — always follows border-radius.
• outline — follows it too, but only in recent browsers: Chrome and Edge from 94, Firefox from 88, Safari from 16.4. On older devices a round button gets a square outline.

4. Distance from the element

• border — sits right against the padding; you can't push it away.
• outline — moves with outline-offset. Positive pushes it outward, negative pulls it inside the element.

5. Can it get clipped

• border — it's inside the element; a parent with overflow: hidden won't touch it.
• outline — it's outside. If the parent clips its content, the outline disappears at the edge. A negative outline-offset helps here.

6. What it's made for

• border — design: dividers, cards, input fields.
• outline — temporary highlighting. Above all, keyboard focus.

Which one to pick

The verdict is simple.

A frame that's always visible is a border. A card at rest, an input, a divider between menu items. It's part of the design, and space for it should be planned in.

A highlight that appears and disappears is an outline. Hover, focus, a "selected" item in a list. It shouldn't move the layout.

If you really want a border on hover — say, only at the bottom — reserve it up front as transparent:

.tab { border-bottom: 2px solid transparent; }
.tab:hover { border-bottom-color: #D4A373; }

Space for the border is reserved from the start. Only the colour changes, so nothing jumps. Keep that colour in a CSS variable so you don't copy it all over the file.

The big outline mistake

Many people dislike the blue ring around a button after a click, so they write outline: none. That breaks keyboard navigation: someone presses Tab and can't see where they are. The full story is in why my focus outline disappeared.

The right move is not to remove it but to show it only for the keyboard:

button:focus { outline: none; }
button:focus-visible { outline: 2px solid #D4A373; outline-offset: 2px; }

The browser applies :focus-visible when focus came from the keyboard. After a mouse click there's no outline; after Tab there is.

Can I put an outline on the top side only?

No, outline has no separate sides. For one side, use a border that's transparent by default, or an offset box-shadow.

Is box-shadow a third option?

Yes. A shadow also takes no space and follows rounded corners in every browser. It's often used instead of outline, but in Windows high-contrast mode shadows may not show, while outline stays.

Why is my button's outline square when its corners are round?

Most likely an older browser — Safari before 16.4, for example. Newer versions trace the outline along border-radius on their own.