Border Radius Previewer

Apply border-radius: 50% to a square element to create a perfect circle. Set all four corners to 50%.

Yes, border-radius can have four individual values in the order: top-left, top-right, bottom-right, bottom-left. This allows unique asymmetric shapes.

Six to twelve pixels for buttons and eight to sixteen for cards works across most interfaces. What matters more than the exact number is consistency: if buttons and input fields on the same screen carry different radii, the layout reads as untidy. When an image sits inside a card, give the inner element a slightly smaller radius than the outer one, or the two curves will visibly disagree.

Fifty percent means "half of each side", so unless the element is square, the horizontal and vertical radii differ and you get an ellipse. For a true circle, set width and height to the same value or add aspect-ratio: 1. If you want a pill shape on something like a button whose width follows its label, use a large fixed value such as 9999px instead of 50% — the ends then stay perfect semicircles at whatever height the element has.