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

Answer 1

I had same question, but I made this(see demo below). I add to each block negative 'margin-left' and negative 'margin-top' equal to the width of the border. Then I add the same but positive 'padding-left' and 'padding-top' to the container, to compensate for the offset. Woo-a-la! Now we get “collapsed” borders around flex items and their container.

.catalog-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-top: 1px;
  padding-left: 1px;
  box-sizing: border-box;
  max-width: 800px;
  margin: auto;
  box-shadow: inset 0 0 0 1px #8c8c8c;
}

.catalog-item {
  width: calc(25% + 1px);
  margin-top: -1px;
  margin-left: -1px;
  padding: 20px;
  border: 1px solid #8c8c8c;
  box-sizing: border-box;
  transition: all 0.2s;
  box-sizing: border-box;
}

.catalog-item:hover {
  border-color: transparent;
  box-shadow: 0 0 15px -2px #8c8c8c;
}