Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Maintain Perfectly Circular Corners on Variable-Height Element

Tags:

css

I have a button with perfectly rounded corners; meaning, the button is 50px high and the border radius is 25px, making a perfect half-circle on either side of the button:

enter image description here

Achieving this with CSS is easy, provided you already know the height of the button (button height ÷ 2 = border radius).

But is it possible to maintain the perfectly-circular edges if the button's height increases dynamically (more text is added, for example)?:

enter image description here

like image 416
kmgdev Avatar asked Nov 24 '13 18:11

kmgdev


1 Answers

Just set the border-radius to something high, like 360px.

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

Look at this jsFiddle example to see what I mean.

like image 150
Josh Crozier Avatar answered Oct 14 '22 16:10

Josh Crozier