Flexbox Borders revisited (gap decorations)

Three years ago, I came up with a solution to add borders to a Flexbox layout by using the ::before and ::after pseudo elements. I had been inspired by Ahmad Shadeed’s Flexbox Dynamic Line Separator article. I wrote about my solution, CSS Trick: Flexbox Borders. It remains one of my more popular articles on search. Fast forward to 2026. There is a new CSS feature that is not yet Baseline available that will make my solution obsolete. The feature is called gap decorations. So I wanted to revisit my original solution and replace it with gap decorations. Gap decorations allow us to style the gaps between CSS Grid, Flexbox, and Multi-column layouts. There are also a lot of different options. You can break the lines so they do not intersect between rows and columns when using Grid layout. You can also inset gap lines so that they are not the full width or height and you can have different insets to create all sorts of different decorations. You can also control visibility so that lines…