Utrzymuj idealnie okrągłe narożniki na elementach o zmiennej wysokości

Question

Mam przycisk z idealnie zaokrąglonymi narożnikami; sens, przycisk jest 50px wysoki i promień granica jest 25px, tworząc idealne półkolu po obu stronach przycisku:

osiągnięcia tego z CSS jest proste, pod warunkiem, że już wiem, wysokość przycisk (wysokość przycisku ÷ 2 = promień obramowania).

Ale czy to możliwe, aby utrzymać doskonale okrągłe krawędzie jeśli wysokość przycisk za zwiększa dynamicznie (więcej tekst jest dodawany, na przykład) ?:

Answer 1

Wystarczy ustawić border-radius coś wysokiego, jak 360px.

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

Spójrz na this jsFiddle example, aby zobaczyć, co mam na myśli.