Border Radius Previewer

The border-radius property lets you round the corners of an element's border box. You can define all corners at once with a single value, or individually for top-left, top-right, bottom-right, and bottom-left. You can even create elliptical corners using a slash notation like "20px / 40px".

Use px for fixed-size shapes where you want a consistent corner size regardless of the element's dimensions. Use % (up to 50%) to create rounded effects that scale with the element — setting all corners to 50% on an equal-width/height element creates a perfect circle.

For a circle: set the element to equal width and height, then use border-radius: 50%. For a pill/stadium shape on a rectangle: use border-radius: 9999px (or a very large px value) — the browser automatically clamps it to the natural maximum.

Yes, using the slash notation: border-radius: 20px 50px 30px 10px / 10px 30px 50px 20px. The values before the slash set the horizontal radii for each corner; the values after set the vertical radii. This produces elliptical corners.