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:
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)?:
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With