Is it possible to make the border radius equal to half the total height without JavaScript?

Question

I am creating a website and layouts require that the left and right ends of a certain type of elements are semicircles. Since the elements will be of different heights depending on how much text is in them, I know that means I need to make the radius of the borders equal to half the total height of the element. Is this possible without using JS?

Answer 1

Definitely - just set border-radius to a large size!

 #some-element { border-radius: 9999px; } 

It will reach the maximum size that allows circular angles. However, if your element is taller than wide, remember that you cannot have both sides in a semicircle without enlarging the element.