Border Radius Generator

Border Radius Generator helps you shape the corners of any element on a web page, from a gently rounded card to a perfect circle or a wobbly organic blob. Simple corners mode is for everyday work: set one radius for all four corners, or each corner on its own, in pixels, percent or rem. The CSS is written in the shortest form that means the same thing, so 24px 24px 0 0 stays tidy and four equal corners become a single value.

Blob mode unlocks the less familiar half of border-radius. Every corner can have a different horizontal and vertical radius, written with a slash, which is how designers make egg, leaf and drop shapes and the soft blobs seen behind hero images. Eight handles sit on the edges of the preview; drag them and the shape follows. With Smooth switched on, the curves on each edge always meet with no flat part, and Random blob rolls a new shape whenever you need inspiration.

You can preview the shape filled with a gradient, a solid colour or one of your own photos, and add ticket notches cut with a CSS mask. Your photo is shown from your own device and never uploaded.

1. Pick “Simple corners” or “Blob (8 values)” at the top, or start from a preset.
2. In Simple corners, choose px, % or rem and move the All corners slider. Untick “Same radius for all four corners” to set each one.
3. In Blob mode, drag the dots on the edges of the preview, type exact percentages in the table, or press “Random blob”.
4. Set the preview size, tick “Ticket notches” if you want bites out of the sides, and choose Gradient, Solid or Image to fill the shape.
5. Press “Copy CSS” or “Copy Tailwind class”.

• Simple corners in px, %, or rem, linked or one by one, with values converted when you switch unit.
• Blob mode with all eight radii (horizontal and vertical for each corner) and the slash syntax written for you.
• Eight draggable handles on the preview, with arrow-key control for keyboard users.
• A Smooth option that keeps curves joined, and a Random blob button.
• Ten presets: pill, circle, squircle-ish, leaf, ticket, egg, drop, soft blob, card and tab.
• Ticket notches made with a CSS mask, with an adjustable notch size.
• Preview fill as a two-colour gradient, a solid colour, or a local image that is never uploaded.
• Shortest-form CSS output and a Tailwind rounded-[…] class.

• For a pill-shaped button whatever its size, use a very large pixel value such as 999px rather than 50%. Percent on a wide button gives oval ends.
• A circle needs a square element plus 50%. On a rectangle, 50% gives an ellipse instead.
• When radii on one edge add up to more than 100%, browsers shrink all of them to fit. Smooth mode avoids this, so what you drag is exactly what you get.
• Blobs look great behind a photo or a heading. Try overflow: hidden on the blob and put an image inside it, as the Image fill shows.
• Ticket notches use mask, which needs the -webkit- copy in older Safari. The copied CSS includes both lines.