distante distante - 5 months ago 14
CSS Question

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

I did a search here but some talk 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 border, it will add 2px (side by side) and will - sometimes - break the current layout.

I'm wondering this just for control purposes, something to turn on/off, no for production.

thanks!

Answer

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