Avoid Border Overlap CSS

Question

This is a simple question, I even think someone asked this before, but It never got a real answer.

What I want is to avoid border overlapping, It\'s that simple. Her

Answer 1

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/