CSS Border Radius Generator

The CSS border-radius property rounds the corners of an element. Each corner can have separate horizontal and vertical radii, allowing elliptical curves and organic shapes.

Syntax

• Simple: border-radius: 10px; — same radius on all four corners
• Per-corner: border-radius: 10px 20px 30px 40px; — top-left, top-right, bottom-right, bottom-left
• Elliptical: border-radius: 10px 20px / 30px 40px; — horizontal radii / vertical radii

Corner Properties

• Horizontal (H): Controls the horizontal extent of the curve
• Vertical (V): Controls the vertical extent of the curve
• Linked mode: When enabled, changing one corner updates all corners to the same value

Common Shapes

• Circle: Set all values to 50% on a square element
• Pill: Set all values to 50% on a rectangle (width > height)
• Leaf: Round only two diagonal corners (e.g., top-left and bottom-right)
• Squircle: Use moderate values (15-25%) for a smooth rounded square

Tips

• Use percentages for shapes that scale with the element size
• Use pixels for fixed-radius corners that stay consistent regardless of element dimensions
• Values above 50% are clamped by the browser and have the same effect as 50%
• Separate H and V values create elliptical corners for organic, blob-like shapes

You can embed this util on your own site as a widget. Adding ?embed=1 to the URL loads a compact version with just the tool itself; no header, menu, or documentation. Paste this snippet into your HTML:

Copy snippet Adjust the height to taste.