CSS Border Radius Generator & Blob Shape Maker

How to use the border radius generator

1. Choose a mode: All corners for one value, Each corner for four values, or Shape for eight values that create organic blob shapes.
2. Pick a unit: px for fixed corners, % for corners that scale with the element, or rem to follow the root font size.
3. Move the sliders or type values, and resize the preview to see how the corners behave at other sizes.
4. Copy the CSS or the Tailwind class.

How border-radius works

• One value (border-radius: 12px) rounds all four corners the same way.
• Four values go clockwise from the top left: top left, top right, bottom right, bottom left.
• Eight values with a slash set horizontal and vertical radii separately: 30% 70% 70% 30% / 30% 30% 70% 70%. Different radii on each axis make elliptical corners, which is the trick behind CSS blob shapes.
• 50% turns a square into a circle and a rectangle into an ellipse. For a pill-shaped button, use a large pixel value such as 9999px instead, so the ends stay round at any width.

Design tips

• Use a small set of radii across your interface, for example 4px for inputs, 8–12px for cards and a pill shape for tags.
• Nested elements look best when the inner radius equals the outer radius minus the padding between them.
• Child images and backgrounds can poke out of rounded corners; add overflow: hidden to the parent.
• Animate the eight-value shape between two blobs for a soft, morphing background effect.

Bootstrap and Tailwind CSS

Bootstrap 5 offers rounded, rounded-1 to rounded-5, rounded-circle and rounded-pill. Tailwind CSS maps common pixel values to rounded-lg, rounded-xl and similar classes; the generator outputs the matching class when one exists and an arbitrary value such as rounded-[30%_70%_70%_30%_/_30%_30%_70%_70%] otherwise. Combine rounded corners with the box shadow generator for complete card styles.