Border Radius Generator

About Border radius generator

Round a box uniformly, corner by corner, or with the eight-value slash syntax that produces organic blob shapes. The preview shows a 160 by 120 rectangle that follows your values, and the tool prints the matching border-radius line. It is useful when you need to see the difference between elliptical and circular corners.

How to use it

1. Choose Simple, Individual or Blob on the Mode tabs.
2. In Simple, pick px or % and move the Radius slider (up to 200 px or 100 percent).
3. In Individual, set Top left, Top right, Bottom right and Bottom left separately, again in px or %.
4. In Blob, move the eight sliders that give each corner a horizontal (X) and vertical (Y) radius in pixels.
5. Copy the result with Copy CSS.

The default blob

Blob mode, all sliders at their starting positions

border-radius: 40px 60px 60px 40px / 60px 40px 40px 60px;

When to use it

• Making a perfect circular avatar by setting 50 percent in Simple mode.
• Building a leaf or pill shape by rounding only two opposite corners in Individual mode.
• Creating a blob background for a landing-page illustration.
• Checking how percentage radii behave on a rectangle that is wider than it is tall.

Questions about Border radius generator

What does the slash in the blob output mean?

Values before the slash are horizontal radii for top-left, top-right, bottom-right and bottom-left, and values after it are the vertical radii for the same corners. When they differ the corner becomes an ellipse.

Does the px and % toggle affect Blob mode?

No. The unit choice is shared between Simple and Individual, while Blob always writes pixels.

What happens if radii are bigger than the box?

Browsers scale all radii down proportionally so they never overlap. That means a very large px value on a small element behaves like a full pill.

Why does 50 percent make a circle only sometimes?

It creates an ellipse whose radii are half the width and half the height. On a square element that is a circle, and on a rectangle it is an oval.

Related tools

• CSS clip-path generatorBuild polygon, circle, ellipse, and inset clip-path shapes with point editor and presets
• SVG wave generatorCreate layered SVG wave dividers — export as inline SVG markup or CSS background-image data URI
• Gradient generatorBuild CSS linear, radial, and conic gradients with custom stops, angles, and live preview
• CSS shadow generatorCraft box-shadow and text-shadow CSS with multi-layer support, presets, and live preview
• Glassmorphism generatorCreate frosted-glass effects with backdrop blur, transparency, and border controls — live preview included
• Neumorphism generatorBuild soft-UI neumorphic elements with dual box-shadows derived from a single base color