CSS：如何使用 div 标签的边框半径获得直的边框底部

Question

我想要一个 div 元素具有具有特定 border-radius 值的弯曲边框和直的 border-bottom。如果我使用边框半径，则半径也会应用于底部边框。下图显示了底部边框的半径。

我当前的 css 片段：

.post-list {
        margin-bottom: 10px;
        border-top-color: transparent;
        border-right-color: transparent;
        border-left-color: transparent;
        background: rgb(36, 27, 29);
        padding: 1rem 0;
        padding-left: 10px;
        margin-left: 0px;
        border-bottom: 1px solid rgb(23, 9, 9);
        box-sizing: border-box;
        border-radius: 6px;
    }

我想要 div 的直底边框和弯曲边框。我该怎么做呢？

Answer 1

如果您不想在底部设置边框半径，您可以使用 border-top-left-radius 和 border-top-right-radius 仅设置顶部边框，如下所示：

.post-list {
        margin-bottom: 10px;
        border-top-color: transparent;
        border-right-color: transparent;
        border-left-color: transparent;
        background: rgb(36, 27, 29);
        padding: 1rem 0;
        padding-left: 10px;
        margin-left: 0px;
        border-bottom: 1px solid rgb(23, 9, 9);
        box-sizing: border-box;
        color: white;
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
    }

<div class= "post-list">
hello world
</div>

Answer 2

我不确定你想达到什么目的，但据我所知，最简单的方法是两个嵌套 div:

#outerDiv {
  border-bottom: 1px solid red;
}

#innerDiv {
  background-color: grey;
  border-radius: 5px;
  padding: 10px;
}

<div id="outerDiv">
  <div id="innerDiv">Here be Content</div>
</div>

CSS：如何使用 div 标签的边框半径获得直的边框底部

CSS: How to get straight border-bottom with a border radius to a div tag

html

css

border