0xdump

CSS Tools

Border Radius Generator

Shape corners visually and export precise border-radius values.

Live tool

Shape the corners

Horizontal radius

Preview

Radius sample

Generated CSS

Ready to paste

border-radius: 24px;

What this tool does

It makes the shape logic behind `border-radius` visible instead of forcing you to memorize syntax first.

You can shape each corner independently, link them all together, or switch into elliptical mode when you need more organic surfaces. The output updates instantly so you can copy the exact radius string once the preview looks right.

How to use

From a neutral card to a custom shape in a few moves.

  1. Start with a preset if you want a common shape quickly.
  2. Keep `Link all corners` enabled for symmetric surfaces like cards and pills.
  3. Turn it off when each corner needs its own value.
  4. Enable elliptical mode when the horizontal and vertical radii should differ.
  5. Copy the generated `border-radius` value into your CSS once the preview feels right.

Example shapes

A few useful shapes you can build from the current presets.

Soft card

Rounded but restrained, good for most interface surfaces.

Pill

High-radius shape for chips, tabs, and buttons.

Organic blob

Asymmetric ellipse for more playful surfaces and hero shapes.

FAQ

The main questions that come up when working with radius syntax.

When do I need four values instead of one?

Use a single value when every corner matches. Use four values when the surface needs a distinct top-left, top-right, bottom-right, and bottom-left shape.

What does elliptical radius actually change?

It splits horizontal and vertical radii into two groups, which makes more stretched or irregular corner shapes possible.

Is very large radius valid CSS?

Yes. Very large values are valid and often used for pills or fully rounded controls. The browser clamps the final visual result based on element dimensions.

Related Tools

Keep exploring

Gradient Generator

Live

Build linear, radial, and conic gradients with live CSS output.

Open tool

Box Shadow Generator

Live

Tune offset, blur, spread, and inset values for cleaner elevation.

Open tool

Glassmorphism Generator

Live

Create frosted-glass card styles with blur, border, and shadow controls.

Open tool