How to Avoid Double Borders in CSS: Outline vs. Negative Margins?

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:

<code class="css">.collection {
  /* Optional styling */
  margin-top: -1px;
  margin-left: -1px;
}

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

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:

<code class="css">.collection .child {
  margin-top: -1px;
  margin-left: -1px;
}</code>

The above is the detailed content of How to Avoid Double Borders in CSS: Outline vs. Negative Margins?. For more information, please follow other related articles on the PHP Chinese website!