Flexbox Borders revisited (gap decorations)

Posted 2 hours ago

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 don’t appear when you have empty columns or rows in a Grid layout. Or you can choose to show them.

Here are some resources that I found helpful to understanding gap decorations:

• Gap decorations: Now available in Chromium (Javier Contreras and Sam Davis Omekara, Chrome for Developers)
• Let’s Play With Gap Decorations! (Temani Afif, Master.dev blog) – Temani explores many clever solutions using gap decorations with elements that would not normally be in a Grid or Flexbox layout but removes the need for solutions that require extra elements like pseudo-elements or backgrounds to pull off.
• Responsive Separator for Horizontal List (Temani Afif, CSS Tip) – Another clever solution from Temani using gap decorations.
• CSS is filling the gaps with rules. A way to style gaps in grid and flex. (Brecht De Ruyte)
• CSS Gap Decorations Demo (Microsoft) – An interactive playground to see how gap decorations work with a lot of different options. If you only look at one of these resources, go play with this one.

Revisiting my flexbox borders solution

In my original solution, I had this basic HTML structure:

<div class="footer-links">
  <a href="/" class="footer-logo">...</a>
  <nav class="footer-nav">
    <ul id="menu-footer" class="menu">
      <!-- List of links -->
      <li>..</li>
    </ul>
  </nav>
  <div class="social-links">...</div>
</div>

The CSS Trick I used was to add a ::before and ::after pseudo element to .footer-links. I also had to add order to .footer-links and .social-links:

.footer-links .footer-logo {
  order: -1;
}

.footer-links .social-links {
  order: 5;
}

Using gap decorations, I no longer need the pseudo elements but can add the gap decorations to .footer-links.

.footer-links {
  column-rule: 1px solid white;
  row-gap: 6em; /* Added for smaller layouts in conjunction with flex-wrap: wrap */
  row-rule: 1px solid white; /* Added for smaller layouts in conjunction with flex-wrap: wrap */
}

I made some other tweaks to my original layout for smaller screens. I noted those in the Codepen included below.

You can see my original solution at lomarlabs.com in the site footer.

Can I use this today?

You can use gap decoration as a progressive enhancement right now. As of the time of writing this, it is not yet supported in Firefox or Safari. You can use row-rule-visibility-items as your declaration within your feature queries.

@supports not (row-rule-visibility-items: all) {
  /* Styles to use for browsers that do not support gap decorations */
}

@supports (row-rule-visibility-items: all) {
  /* Styles to use for browsers that support gap decorations */
}

CSS is getting better and better

It is never too early to start learning about new CSS features. You don’t have to learn all of them but it is good to be familiar with what is coming down the road or what new features are baseline stable or newly available. Gap decorations are an exciting addition that many of us have been wanting for many years.

Pick the features that interest you or that you know would solve a problem that you encounter in your work. That is the best way to start.

I would suggest following these people and sources to help you to learn and familiarize yourselves with what’s new or what’s coming in the future with CSS. These are the ones that I am learning from.

• Kevin Powell (Bluesky) – Kevin does regular long and short form videos where he walks through new CSS features.
• Ahmad Shadeed (Bluesky) – Ahmad regularly does these great interactive articles where you can learn about and play with new CSS features. He has also created a great course, The Layout Maestro, where he shows you how to combine many new CSS features to create modern layouts. His course equips you with the mindset to solve future problems in your own day-to-day work.
• Temani Afif (Bluesky) – Temani plays around with a lot of new features in his CSS Tip site. He comes up with some very clever solutions.
• Una Kravets (Bluesky) – Una regularly shares about new features on her site and it short videos on Bluesky.
• CSS Tricks – Daniel Schwarz has been regularly sharing new features and browser updates in his What’s !important regular feature.
• Adam Argyle (Bluesky) – Adam regularly shares experiments and fun demos of new CSS features. He had regularly shared new features as conference talks over the last five or six years.
• Cyd Stumpel (Bluesky) – If you are interested in view transitions or CSS animations, Cyd is the person to follow. Her portfolio is a showcase of these techniques.
• Master.dev Blog – They have weekly articles by a bunch of different voices that highlight and push the boundaries of modern CSS.
• Josh Comeau (Bluesky) – Josh is a great teacher and regularly writes about CSS. His most recent article was about anchor positioning.