Revision history [back]

The method for causing two borders to overlap is to apply a negative margin to one of the elements. This will cause the element to overlap with the adjacent element, including its border. Here is an example:

HTML:

<div class="box1"></div>
<div class="box2"></div>

CSS:

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  border: 10px solid blue;
}
.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  border: 10px solid red;
  margin-left: -10px;
}

In this example, we have two div elements with different background colors and border colors. By applying a negative margin of 10px to the second box, it overlaps with the first box, causing their borders to overlap.