outline property in CSS draws a line around the outside of an element. This is quite similar to the
border property, the main exception being that
outline isn’t a part of the box model. It is often used for highlighting elements, for example, the
In this article, let’s put a point on it, leaning into what
outline is good at:
- They can be collapsed with each other (trickery!) because they technically “take up no space.”
- Showing and hiding outlines, or changing
outline-width, doesn’t trigger layouts (which is good for performant animations and transitions).
Easier faux-table cell borders
Below is an example of a list that is laid out as a grid, making it look a bit like a table layout. Every cell has a minimum width, and will grow/shrink as the container becomes wider/narrower.
We could use
border to pull this off, like this:
But in order to make an even border around each cell — never doubling up or missing — it’s a cumbersome process. Above, I used a border on all sides of each “cell” then negative margins to overlap them and prevent doubling. That meant clipping off the border on two sides, so the borders had to be re-applied there on the parent. Too much fiddly work, if you ask me.
Even having to hide the
overflow is a big ask, which you have to do because, otherwise, you’ll trigger scrollbars unless you resort to even thicker trickery, like using absolutely-positioned pseudo elements.
Check out the same result, visually, only using
The code here is much cleaner. There is no real trickery at play. Each “cell” just has an outline around it, and that’s it.
Border in animation
border-width will always trigger layout, no matter if it is actually needed.
In addition, due to Chrome’s special handling of sub-pixels for border widths, animating the
border-width property makes the entire border shake (which I think is strange). Firefox doesn’t have this issue.
There are pros and cons when it comes to animating borders. Check out Stephen Shaw’s post from a while back for an example of the performance implications.
There are some gotchas
Of course there are. Like most other CSS properties, there are a few “gotchas” or things to know when working with the
- Rounded outlines are only supported in Firefox at the time of writing. I imagine other browsers will eventually support them as well.
- An outline always goes around all the sides. That is to say it’s not a shorthand property like, say,
border; so no
outline-bottom, and so on.
But we can work around these limitations! For example, we can use add a
box-shadow with no blur radius as an alternative. But remember:
box-shadow has a higher performance cost than using either
Will you always be working on something that calls for faking a table with an unordered list? Unlikely. But the fact that we can use
outline and its lack of participation in the box model makes it interesting, particularly as a
border alternative in some cases.
Maybe something like this tic-tac-toe board Chris put together several years ago could benefit from
outline, instead of resorting to individually-crafted cell borders. Challenge accepted, Mr. Coyier? 😉
I wonder why you don’t just use tables for tabular data.
I only use flat table for giving an example. This trick can be used for other situations.
Sometimes I tend to do this trick:
Set gap on the wrapper
Apply a background-color to use as the cell-border-color on the wrapper
Give the cells a background-color
See https://codepen.io/bramus/pen/NWpmVRJ for example.
On the upside you can now have a different cell-border-color than the border-color of the wrapper.
On the downside, you can end up with a big colored block (matching the cell-border-color) in case the actual cell count doesn’t properly match the number of cells the grid can hold.
Yeah I did it before: https://codepen.io/CarterLi/pen/GRWMXMb
Another downside: cell-background can no longer be transparent
So no mention of accessibility, which is the primary use case for
outline? In other words, before using
borderthe author should ensure that interactive states/focus is always clear.
In other other words, don’t do this.
Why can’t you use outline for now focusable elements.
The property outline does nothing with accessibility.
What did I miss here?
Isn’t border-collapse exactly doing the job here?
Like, since forever?
In the very latest Firefox (Feb 2023), the “outline trick” makes it look like all the cells correctly “collapse”… except a few random ones. Those look like they have 1 side with a double-width border.