Esta es una pregunta simple, incluso creo que alguien hizo esto antes, pero nunca obtuvo una respuesta real.

Lo que quiero es evitar la superposición de bordes, es así de simple. Aquí hay un ejemplo:

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

Puedes ver que los bordes se superponen en la esquina.

Aquí está el ejemplo en vivo:Ejemplo de jsFiddle

Lo que realmente quiero hacer es hacer que el borde inferior cubra el borde derecho e izquierdo. ¿Puede alguien decirme qué puedo hacer aquí?