Éviter CSS chevauchement de la bordure

C'est une simple question, je crois même que quelqu'un a demandé cela avant, mais Il n'a jamais eu une vraie réponse.

Ce que je veux, c'est pour éviter le chevauchement de la frontière, C'est aussi simple que cela. Voici un exemple:

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

Éviter CSS chevauchement de la bordure

Vous pouvez voir que les frontières se chevauchent dans le coin.

Voici le live exemple: jsFiddle Exemple

Ce que je veux vraiment faire est de faire le bas de la zone de couverture de la droite et de la gauche de la frontière.
Quelqu'un peut me dire ce que je peux faire ici?

source d'informationauteur Andres Orozco

  1. 20

    Vous pouvez superposer un pseudo-élément au-dessus de votre 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;
}

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