Html 圆角边

我的标题导航中有一个选项卡，上面有边框。标签有圆角。我希望选项卡上的边框与标题上的边框齐平。但圆角似乎产生了一种锥形效果。我怎样才能缓解这种情况？我的小提琴：

css:

html:

试试这个：

.tab-shit {
    height:20px;
    border:5px solid red;
    border-top: none;
    bottom:-25px;                /* -25 = - (height+border) */
    border-radius:0 0 25px 25px; /*  25 =    height+border  */
}

---

如果在页眉中添加一个

边框底部

，效果会很好：

因此问题是

边框底部

声明不会影响左右两侧，因此浏览器试图使过渡平滑，因为在拐角的顶端，它应该使用

边框左

和

边框右

。为了解决这个问题，我建议使用伪元素应用边界。所以像这样：

.gizmo {
    /* same */
}
.tab-shiz {
    /* same except no border */
    /* border-bottom:4px solid red; */
}
/* add this */
.tab-shiz:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18px;
    border-radius:0 0 20px 20px;
    border-bottom:1px solid red;
    border-left:1px solid red;
    border-right:1px solid red;
}

这样做将使您可以随心所欲地设置边框样式，而不会影响元素中的许多其他内容。但是，如果您使用CSS转换，请小心，因为它们不适用于生成的内容

---

到目前为止提供的答案证明，可以通过在左侧和右侧添加边框来解决这个问题，或者缩小DOM元素，或者剪切它，以防止左侧和右侧边框出现在标题div的边框上方。我的项目中的选项卡实际上包含一个图标，但我在这里简化它只是为了证明我的问题。由于我的选项卡包含图标，因此我无法收缩高度或剪裁元素。我的结果是在我标签下面的新元素上使用了上面的答案。因此，我的标签现在是方形的，它下面有一个新的

span

，它有圆角、边框半径以及左、下和右边框。

我想您将使用

ul

和

li

来制作标签。因此，使用

边框左上角半径：2米和
边框右上角半径：2米你可以在左上角和右上角给出圆角。@KheemaPandey我不明白你想说什么。我的小提琴上有我的
html
标记。
标题上有边框吗？@HashemQolami是的，请看我的小提琴。@jefffabiny这个怎么样？
.tab-shit {
    height:20px;
    border:5px solid red;
    border-top: none;
    bottom:-25px;                /* -25 = - (height+border) */
    border-radius:0 0 25px 25px; /*  25 =    height+border  */
}

.gizmo {
    /* same */
}
.tab-shiz {
    /* same except no border */
    /* border-bottom:4px solid red; */
}
/* add this */
.tab-shiz:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18px;
    border-radius:0 0 20px 20px;
    border-bottom:1px solid red;
    border-left:1px solid red;
    border-right:1px solid red;
}