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

Question

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

如果你已经知道按钮的高度（按钮高度÷2 =边界半径），使用CSS实现这一点很容易。

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

Answer 1

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

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

看this jsFiddle example看看我的意思。