Is there a way to add overlapping borders to ALL div with css?

Question

I did a search here but I found just info about adjacent borders. Does anybody know if it is possible to add borders to all divs just to see how the current layout works.

If you just add a 1px border, it will add 2px to the width (side by side) and will - sometimes - break the current layout.

I need this just for control purposes, something to turn on/off, not for production.

thanks!

Answer 1

You can better use outline property instead of border, because

• Outlines do not take up space, because they always placed on top of the box of the element which may cause them to overlap other elements on the page.
• Unlike borders, outlines won't allow us to set each edge to a different width, or set different colors and styles for each edge.
• An outline is the same on all sides.
• Outlines don't have any impact on surrounding elements apart from overlapping.
• Unlike borders, outlines don't change the size or position of the element.

.outline-outer,.border-outer{
  height:100px;
  width:100px;
  border:solid 1px blue;
}
.border{
  height:80px;
  width:50px;
  border:solid 1px red;
  float:left;
}
.outline{
   height:80px;
  width:50px;
  outline:solid 1px red;
  float:left;
}

<div class="outline-outer">
  <div class="outline"></div>
  <div class="outline"></div>Outlined
</div>
<br/><br/><br/>
<div class="border-outer">
  <div class="border"></div>
  <div class="border"></div>Bordered
</div>

Fiddle Here