Как я могу получить CSS закругленные углы, не скругляя границу?

Question

Я использую border-radius для округления углов div. У меня также есть граница вдоль нижней части div. Как это:

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

Однако я не хотел бы, чтобы граница имела закругленные края. Я бы хотел, чтобы граница была абсолютно прямой. Есть ли способ добиться этого?

Answer 1

.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 2

Вы можете использовать псевдоэлемент (::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;

}

ДЕМО ЗДЕСЬ

Answer 3

<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 4

Добавьте границу к ::after псевдоэлемент:

div {
  background-color: papayawhip;
  border-radius: .5em;
}
div:after {
  content: "";
  display: block;
  border-bottom: 1px solid black
}

<div>Content</div>

Answer 5

Если я вас правильно понимаю, вы ищете это:

border-top-left-radius: 0.5em;

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

Вы можете указать каждый угловой радиус границы отдельно. Надеюсь это поможет.