Html CSS边框右键不'；无法正确渲染

我有一个菜单，当菜单项处于活动状态时，它应该在右边有一个边框，问题是边框没有正确渲染，请注意边框的底边

此图显示问题：

Jsfiddle：（查看全屏以获得更好的视图）

CSS代码：

.border {
   border-right:4px solid #000;
}

---

谢谢，

渲染是正确的

看看：

请注意边界如何在拐角处相交。菜单项的右边框较厚，下边框较薄。边界在拐角处相交的方式厚的右边界在底部看起来有点弯曲。尝试删除底部边框，然后查看右边框如何再次变直

---

您可以尝试在菜单项中嵌套元素，并将

边框底部

和

边框右侧

应用于不同的元素，或使用伪元素修复外观。

如前所述，问题是底部边框与右侧边框重叠。因此，一种可能的解决方案是使用

：pseudo之后的
来“伪造”边框，将其放置在元素的右侧：


边界以一定角度相交，因此您必须为右侧边界使用替代方法

框阴影
会很好地工作

（夸张）

HTML

<div class="border"> </div>

<div class="shadow">  </div>

你在这里的预期结果是什么？您显示的确实是一个右边有边框的按钮。这是因为您的
边框底部。如果你把它取下来，效果很好。您可以改为使用伪元素而不是border@Antiga是的，它显示了一个边框，但问题是它的边缘看起来有偏差。只是因为
边框底部
重叠的ur
边框右侧
只需尝试将
边框颜色
彼此匹配即可。
.border {
    position: relative;
}

.border:after {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: black;
    content: "\00a0"; /* invisible content */
}

<div class="border"> </div>

<div class="shadow">  </div>

.border,
.shadow {
    background-color: grey;
    width:100px;
    height:100px;
    margin-bottom: 10px;
    border-bottom: 5px solid lightgrey;
}
.border{

    border-right: 20px solid black;
}

.shadow {
    box-shadow: 10px 0 0px 0 black;
}