Is there a simple way to create overlapping borders on div
elements?
Imagine you have the following:
.box {
border: 1px solid #ccc;
width: 50px;
height: 50px;
}
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
You can see a "double border" where the div
s join together.
I am looking for a way to display only a single 1px
border between the div
s.
I am aware that creating different classes is an option, but I am exploring if there is a simpler solution available.
How my question is unique:
In my scenario, the div
s are not wrapped within a container. Therefore, based on the existing answer, the border-collapse:collapse
property needs to be applied to the parent or wrapper element.