CSS 中较短边的圆边

Question

我想让我的文本输入在较短的一边有圆边，这是垂直的一边。我需要的效果是这样的：

如果我使用border-radius: 50%;，这使绳索完全变圆，我会得到这个：

效果我需要能够通过提供一些随机大批来实现border-radius，这就是我所做的：border-radius: 9999px;。

有没有更好的方法，不涉及假数字？

Answer 1

只需使用一个巨大的数字，例如

border-radius: 9999999px;

.horizontal {
  width: 175px;
  height: 50px;
}
.vertical {
  width: 50px;
  height: 175px;
}
.box {
  border-radius: 9999999px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px;
  background: blue;
}

<div class="horizontal box"></div>
<div class="vertical box"></div>

它有效，因为根据规范，

角曲线不得重叠：当任意两个相邻边界半径的总和超过边界框的大小时，UA 必须按比例减少所有边界半径的使用值，直到它们都不重叠。