CSS Border Radius Generator

border-radius rounds the corners of any box — from a subtle 4 px on cards to pills, circles and organic blob shapes. This generator lets you set each corner, or type the full elliptical syntax with horizontal and vertical radii (30% 70% 70% 30% / 30% 30% 70% 70%), checks it, and returns the shortest equivalent CSS, the four longhand properties and a Tailwind class. The preview is drawn by your own browser from the same value.

How to use this tool

1. Pick a preset, or keep Custom and enter the four corner radii.
2. Choose the unit — px for fixed corners, % for shapes that scale with the box.
3. For blobs and eggs, type an advanced value with a "/" for different vertical radii.
4. Set the preview size to match your element, then copy the CSS.

Formula

border-radius: <top-left> <top-right> <bottom-right> <bottom-left> [ / <vertical radii> ]

Like margin, missing values repeat: one value sets all corners, two set diagonal pairs (top-left & bottom-right, top-right & bottom-left), three use the second value for both top-right and bottom-left. Each corner is a quarter ellipse whose horizontal radius comes before the "/" and vertical radius after it.

Example

Corners 10, 20, 10 and 20 px shorten to border-radius: 10px 20px;. The egg preset — 50% horizontally, 60% at the top and 40% at the bottom vertically — becomes border-radius: 50% / 60% 60% 40% 40%;, because the four equal horizontal radii collapse to one value while the vertical ones cannot.