Evitar CSS de sobreposição de bordas
Esta é uma pergunta simples, eu até acho que alguém perguntou isso antes, mas nunca obteve uma resposta real.
O que eu quero é evitar a sobreposição de bordas, é simples assim. Aqui está um exemplo:
div{
width: 400px;
height: 150px;
border: 1px solid red;
border-bottom: 7px solid black;
}
Você pode ver que as bordas se sobrepõem no canto.
Aqui está o exemplo ao vivo:Exemplo de jsFiddle
O que eu realmente quero fazer é fazer com que a borda inferior cubra a borda direita e esquerda. Alguém pode me dizer o que posso fazer aqui?