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. Here's an example:

div{
   width: 400px;
   height: 150px;
   border: 1px solid red;
   border-bottom: 7px solid black;
}

You can see that the borders overlap in the corner.

Here's the live example: jsFiddle Example

What I really want to do is to make the bottom border cover the right and left border. Can someone tell me what can I do here?

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/