如何在不使边界线变圆的情况下获得 CSS 个圆角？

Question

我正在使用 border-radius 来圆化 div 的角。 div 底部还有一条边框线。像这样：

<div style="border-radius: .5em; border-bottom: 1px solid black">Content</div>

但是，我不希望边界线有圆边。我希望边界线完全笔直。有办法实现吗？

Answer 1

<div style="border-radius: .5em; border-bottom: 1px solid black">Content</div>

这样使用

<div style="border-bottom: 1px solid black">
    <div style="border-radius: .5em;">Content</div>
</div>

只需要在里面插入一个div并设置内容的边框半径

Answer 2

.inner {
  background:red;
  border-radius:5px;
  width:100px;
  height:100px;
}

.wrapper {
  display:inline-block;
  border-bottom:1px solid #000;
}

<div class="wrapper">
  <div class="inner"></div>  
</div>

Answer 3

可以使用伪元素(::before)来模拟直边框

CSS

div{
    position: relative;
    border-radius: .5em;
    background: #ccc;
}

div:before{
    position: absolute;
    content: "";
    display:block;
    bottom:0;
    left:0;
    right:0;
    height: 1px;
    background: #000;

}

DEMO HERE

Answer 4

如果我理解正确的话，你正在寻找这个：

border-top-left-radius: 0.5em;

JsFiddle： https://jsfiddle.net/pywdpLL0/1/

您可以分别指定每个角的边框半径。希望这有帮助。

如何在不使边界线变圆的情况下获得 CSS 个圆角？

How can I get CSS rounded corners without rounding the border line?

html

css

border