How to create "collapsed" borders around flex items and their container?

Question

I have the following layout:

#limited-width {    width: 100%;    max-width: 200px;    margin: 0 auto;    font-size: 18px;  }  ul {    display: flex;    flex-flow: row wrap;    list-style: none;    padding: 0;    margin: 20px;  }  ul > li {    display: block;    text-align: center;    flex: 1 0 auto;    max-width: 100%;    box-sizing: border-box;    margin: 0;    padding: 4px 7px;    border: 2px solid rgba(0,0,0,.3);    background-color: rgba(0,0,0,.03);  }

<div id="limited-width">    <ul>      <li>Apple</li>      <li>Orange</li>      <li>Pineapple</li>      <li>Banana</li>      <li>Tomato</li>      <li>Pear</li>      <li>Lemon</li>    </ul>  </div>

As you can see, the list items inside the ul have a border with the width of 2px, but because of this, the border between elements doubles. I'm looking for a way to make the borders the same width between elements, while also keeping the border on the outside the same (similar to how border-collapse works on tables) using flexbox. Is this possible, and if so, how?

Answer 1

There are two primary ways to achieve this. Under each method you will find a working demo that you can expand to see how it behaves. Hovering over elements will give them a red border to make choosing the approach that works best for you easier.

Parent-child border alignment

You need to define the border like this:

ul, ul > li {   border-style: solid;   border-color: rgba(0,0,0,.3); } ul      { border-width: 2px  0   0  2px } ul > li { border-width:  0  2px 2px  0  } 

The key here is in the border-width property:

• On the container, the values for the top and left are set to the desired size while the right and bottom are set to 0
• On the items, the values for the right and bottom are set to the desired size while the top and left are set to 0

By doing this, the borders will add up in a way that they form a nicely collapsed, consistent border around the elements and the container.

:hover { border-color: red }  #limited-width {    width: 100%;    max-width: 200px;    margin: 0 auto;    font-size: 18px;  }  ul, ul > li {    border-style: solid;    border-color: rgba(0,0,0,.3);  }  ul {    display: flex;    flex-flow: row wrap;    list-style: none;    padding: 0;    margin: 20px;    border-width: 2px 0 0 2px;  }  ul > li {    display: block;    text-align: center;    flex: 1 0 auto;    max-width: 100%;    box-sizing: border-box;    margin: 0;    padding: 4px 7px;    border-width: 0 2px 2px 0;    background-color: rgba(0,0,0,.03);  }

<div id="limited-width">    <ul>      <li>Apple</li>      <li>Orange</li>      <li>Pineapple</li>      <li>Banana</li>      <li>Tomato</li>      <li>Pear</li>      <li>Lemon</li>    </ul>  </div>

Halving borders

In case you want to have distinct borders for each element for any purpose, this is a compromise that might suit your needs. Given a desired border-width of 2px the CSS is as follows:

ul, ul > li {   border: 1px solid rgba(0,0,0,.3); } 

This method sets half of the desired border width on both the parent and its children, making the final border 2px thick. Be wary of using this method with fractional pixels (e.g. 1.5px) as you can run into issues.

When using border-color-changing rules the half-width will be apparent, but if you want nicer looking borders this is a much better approach than the first.

:hover { border-color: red }  #limited-width {    width: 100%;    max-width: 200px;    margin: 0 auto;    font-size: 18px;  }  ul, ul > li {    border: 1px solid rgba(0,0,0,.3);  }  ul {    display: flex;    flex-flow: row wrap;    list-style: none;    padding: 0;    margin: 20px;  }  ul > li {    display: block;    text-align: center;    flex: 1 0 auto;    max-width: 100%;    box-sizing: border-box;    margin: 0;    padding: 4px 7px;    background-color: rgba(0,0,0,.03);  }

<div id="limited-width">    <ul>      <li>Apple</li>      <li>Orange</li>      <li>Pineapple</li>      <li>Banana</li>      <li>Tomato</li>      <li>Pear</li>      <li>Lemon</li>    </ul>  </div>