Avoiding Duplicated Borders in CSS

When adjacent elements with borders are placed next to each other, a visual artifact known as "double borders" can occur at the border intersection. To eliminate this undesirable effect, consider these CSS approaches:

Option 1: Using Outline Property

For situations where the order of elements is unpredictable, using the outline property can effectively prevent double borders:

.collection {
  /* Optional styling */
  margin-top: -1px;
  margin-left: -1px;
}

.collection .child {
  outline: 1px solid; /* Replaces border */
  margin-top: 1px;
  margin-left: 1px;
}

Note that outline is not supported in older browsers (IE7 and earlier).

Option 2: Negative Margins with Borders

If using borders is preferred, employ negative margins to offset the double border:

.collection .child {
  margin-top: -1px;
  margin-left: -1px;
}