在可变高度元件上保持完美的圆角

Question

我有一个圆角的按钮；意思是，按钮高50px，边框半径25px，在按钮两侧形成一个完美的半圆：

只要您已经知道按钮的高度（按钮高度 ÷ 2 = 边框半径），使用 CSS 即可轻松实现。

但是如果按钮的高度动态增加（例如添加更多文本），是否可以保持完美的圆形边缘？：

Answer 1

只需将border-radius 设置为较高的值，例如360px。

div {
    height:50px;
    width:500px;
    background:red;
    border-radius:360px;
}

查看this jsFiddle example 了解我的意思。