Avoid Border Overlap CSS

You can overlay a pseudo element over your div:

div {
    background-color: gold;
    border-top: 4px solid #172e4e;
    height: 100px;
    position: relative;
    width: 100px;
}

div::after {
    content: "";
    position: absolute;
    bottom: 0; top: 0px; left: 0; right: 0;
    border-right:4px solid orange;
    border-left:4px solid orange;
}

Example: http://jsfiddle.net/vpHW5/10/

Preventing double borders in CSS

#divNumberOne { border-right: 0; }

How to prevent overlapping borders of list elements in an unordered list

There are many possible solutions. For instance:

#navigation_bar {
  overflow: hidden;
  list-style-type: none;
  width: 100%;
}
#navigation_bar li {
  text-align: center;
  float: left;
  width: 32%;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  border-left:none;
}
#navigation_bar li.first {    
  border-left:solid 1px black;
}

<ul id="navigation_bar">
  <li class="first">Projection</li>
  <li>Real-Time</li>
  <li>Cleanup</li>
</ul>

How to make a border not overlap another one, with multiple selections or single?

There are multiple solutions to this common problem.

Another would would be to shift every element but the first to the left by 1px (border-width)

Assuming your selection changes the color of the border. You can change the z-index while the element is selected. The same technique can also be used for your explained problem with the missing borders. To visualize this I added a hover styling.

.container {

  display: flex;

}

.square {

  display: inline-flex;

  width: 30px;

  justify-content: center;

  border: 1px solid black;

}

.square:not(:first-child) {

  margin-left: -1px;

}

.square:hover {

  border-color: red;

  z-index: 1;

}

<div class="container">

  <div class="square">1</div>

  <div class="square">2</div>

  <div class="square">3</div>

  <div class="square">4</div>

</div>

How to avoid content from overlapping div border

Demo Fiddle

How about the following:

div.cabinet{
  border-right:5px solid #e7e8e1;
  white-space:nowrap;
  display:inline-block;
  padding-right:5px;
}

Use inline-block to make the div fit the content, then add padding. If you only wish the child ul to do this, simply apply those properties to div.cabinet ul instead (as well as the border).

css padding causing borders to overlap

It seems this css works:

.display_times {
  padding: 5px 10px 5px 10px !important;
  font-size: 24px;
  border:1px solid black; 
  display: inline-block;
}

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

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>

CSS border overlapping with sidebar and header

Here is the document, I also added margin: 0; to remove the space between the edge of the page and the header and sidebar.

<html>
  <style>
    body {
    margin: 0;
 }
 #sidebarLeft {
    position: fixed;
    height: calc(100% - 200px);
    width: 128px;
    border-right: 10px solid rgba(0, 0, 0, 0.50);
    background-color: rgba(191, 63, 187, 0.5);
    margin-top: 100px;
}
#sidebarRight {
    position: fixed;
    height: calc(100% - 200px);
    width: 128px;
    border-left: 10px solid rgba(0, 0, 0, 0.50);
    background-color: rgba(191, 63, 187, 0.5);
    margin-top: 100px;
    right: 0;
}
#header {
    position: absolute;
    height: 100px;
    width: calc(100% - 276px);
    border-bottom: 10px solid rgba(0, 0, 0, 0.50);
    background-color: rgba(191, 63, 187, 0.5);
    margin-left: 138px;
}
#corner {
    background-color: rgba(191, 63, 187, 0.5);
    width: 138px;
    height: 100px;
    position: absolute;

}
#Bcorner {
    background-color: rgba(191, 63, 187, 0.5);
    width: 138px;
    height: 100px;
    bottom: 0;
    position: absolute;
}
#cornerTopRight {
    background-color: rgba(191, 63, 187, 0.5);
    width: 138px;
    height: 100px;
    right: 0;
    position: absolute;
}
#cornerBottomRight {
    background-color: rgba(191, 63, 187, 0.5);
    width: 138px;
    height: 100px;
    bottom: 0;
    right: 0;
    position: absolute;
}
#footer {
    position: absolute;
    height: 100px;
    width: calc(100% - 276px);
    border-top: 10px solid rgba(0, 0, 0, 0.50);
    background-color: rgba(191, 63, 187, 0.5);
    margin-left: 138px;
    bottom: 0;
}
</style>
<body>
<div id="top">
<div id="corner">
</div>
<div id="header">
</div>
</div>
<div id="sidebarLeft">
</div>
<div id="sidebarRight">
</div>
<div id="bottom">
<div id="Bcorner">
</div>
<div id="footer">
</div>
</div>
<div id="cornerTopRight">
</div>
<div id="cornerBottomRight">
</div>
</body>
</html>

Avoid Border Overlap CSS