border-radius is great but it can be a pain to try and get a pill shape if you don't know the dimensions of the element.
If you use 50% and your element doesn’t have a 1:1 aspect ratio, the rounded corners won’t be proportional.
Try this instead:
border-radius: 100vw;
The 100vw is an arbitrary large value. Since the value a lot larger than the dimensions of the element (technically you could have an element larger than this but it would be off-screen), the browser caps the radius at exactly half of the element’s shortest side, resulting in a proportional pill shape.
Tim Bennett is a freelance web designer from Leeds. He has a First Class Honours degree in Computing from
Leeds Metropolitan University and currently runs his own one-man web design company, Texelate.