避免边框重叠CSS

Question

这是一个简单的问题，我甚至认为有人曾经问过这个问题，但它从来没有得到真正的答案。

我想要的是避免边框重叠，就这么简单。这是一个例子：

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

您可以看到边框在边角重叠。

以下是实例：jsFiddle Example

我真正想做的是让底部边框覆盖右边框和左边框。 有人能告诉我我能在这做什么吗？

Answer 1

您可以在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;
}

示例：http://jsfiddle.net/vpHW5/10/