更圆角 - Border Radius CSS

Question

我希望在CSS中做更多圆角以获得如下结果：

目前，我有这段代码：

border-radius: 0 400px 0 0;

导致：

即使我放了50px或1000px，第二个值也不会改变角落。

有没有办法获得类似的边界半径？

Answer 1

你需要延长边界半径：

.test {
  border: 1px solid black;
  text-align:center;
  
  /* border-top-left-radius: horizontal vertical */
  border-top-left-radius: 50px 20px;
}

<div class="test">
  lorem ipsum
</div>

More information

Answer 2

这是另一种方法。

.card {
  max-width: 100px;		
  height: 20px;		
  margin: 10px;
  background-color: green;
  border-radius: 150px 100px/75px 0px 0px;
}

<div class="card "></div>