在css中，上边框显示在左边框上方

我需要一个20px的左边框和一个1px的上边框

上面的片段：

border-left:20px solid #ff0000;
border-top:1px solid #4f5565;

将实际产生以下结果：

如您所见，上边框显示在左边框上方

---

如何修复此问题？

给定

div

：

<div class="container"></div>

---

看看这个。

我不这么认为。可以使用左边框样式，对于上边框，可以使用图像

即

div{
宽度：50px；
高度：50px；
左边框：20px实心#ff0000；
背景：url（images/2x2dot.jpg）20px top repeat-x；
}

您希望显示什么行为？两条边界在什么地方相交成一个角度？

.container {
    border-top: 1px solid #4f5565;
    border-left:0;
    position:relative; /* Limits the :before declaration to the bounds of the element */
}
.container:before {
    content:"\00a0"; /* Escaped unicode for a non-blank space */
    border-left:20px solid #ff0000;
    height:100%;
    position:absolute;
    top: -1px;
}

<style>
div {
    width: 50px;
    height: 50px;
    border-left: 20px solid #ff0000;
    background: url(images/2x2dot.jpg) 20px top repeat-x;
}
</style>