The Case for Using outline Where You’d Normally Reach for border

The CSS outline property draws a line around the outside of an element, much like border. The key difference? An outline sits outside the box model, taking up no layout space. That distinction makes it a surprisingly useful tool in situations where borders get fiddly or expensive.

Two traits make outline worth leaning on:

  • Outlines can be collapsed against one another since they don’t occupy space in the layout.
  • Showing, hiding, or changing outline-width doesn’t trigger reflows, which makes it a solid choice for performant animations and transitions.

Simpler Grid Cell Borders

Consider a list laid out as a grid to mimic a table. Each cell has a minimum width and flexes with the container. Using border to draw an even line around every cell—without doubling up or missing edges—is surprisingly cumbersome. The typical approach involves applying borders to all sides of each cell, then using negative margins to overlap them and prevent doubling. That requires clipping borders on two sides and re-applying them on the parent. It’s fiddly, and hiding overflow becomes necessary to avoid unwanted scrollbars unless you resort to absolutely-positioned pseudo-elements.

Showing a flat table with seven columns and four rows, each cell numbered sequentially, 1 through 28. The table has a white background and block text and the borders are black around each cell with ample padding.

The same visual result with outline is far cleaner. Each cell simply gets an outline around it; no overlapping tricks, no clipped borders, no overflow management.

Animating Widths Without the Jank

Changing border-width always triggers layout, even when it technically isn’t needed. That makes border animations inherently more expensive than they need to be.

Showing the paint rendering results from a performance test where a layout change is shown in the middle of the results taking 58.4 milliseconds to complete.

There’s another quirk: Chrome’s sub-pixel handling for border widths causes the entire border to shake during animation. Firefox doesn’t exhibit this behavior.

Showing another performance test, this time with no layout triggered in the results.

For a deeper dive into the performance implications of animating borders, Stephen Shaw’s earlier write-up covers the trade-offs well.

Known Limitations and Workarounds

Nothing is free, and outline has a couple of gotchas:

  1. Rounded outlines are only supported in Firefox at the time of writing. Other browsers will likely catch up eventually.
  2. An outline always wraps all four sides of an element. There’s no outline-bottom, since it’s not a shorthand like border.

Those constraints are workable. A box-shadow with no blur radius is a viable stand-in where you need per-side control. Just be aware that box-shadow carries a higher performance cost than either outline or border.

Where the Trick Pays Off

You probably won’t be faking a table with an unordered list every day. But the fact that outline sits outside the box model makes it a compelling alternative to border in any scenario where layout shifts are undesirable or border overlap is a pain. Even something like a tic-tac-toe board could benefit from using outline instead of crafting individual cell borders.