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

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);
}

  

    
Apple
    
Orange
    
Pineapple
    
Banana
    
Tomato
    
Pear
    
Lemon
  

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);
}

  

    
Apple
    
Orange
    
Pineapple
    
Banana
    
Tomato
    
Pear
    
Lemon