html - 如何使 div 仅从左右四舍五入？

Question

我想像下面这样舍入按钮的左侧和右侧

请注意，它的顶部和底部是直线，并且只有两侧是圆形的。

button{
  background: transparent;
  border: 2px solid black;
  font-size: 25px;
  border-radius: 50%;
  width: 200px;
  padding: 5px;
}

<button>View All</button>

我曾尝试使用border-radius:50%，但它使整个按钮变圆。

标签： htmlcss

Answer 1

您可以为 div 的左侧/右侧定义不同的边框半径。

尝试：

button{
  background: transparent;
  border: 2px solid black;
  font-size: 25px;
  border-radius: 10%/50%;
  width: 200px;
  padding: 5px;
}

<button>View All</button>

并尝试border-radius: 10%/50%类似的变化border-radius: 20%/40%......