Zum Inhalt springen
▢

Border Radius Generator

Design CSS border-radius visually.

preview
Corners
Shape
Unit
Radius
px
border-radius: 8px;

Elliptical mode sets horizontal and vertical radii per corner (CSS slash syntax). Full uses a large radius for pills and circular buttons.

Über Border Radius Generator

A border-radius generator lets you design corner rounding visually and copy shorthand or expanded CSS. Support linked or per-corner control, circular or elliptical radii, and px / % / rem units. toco.tools shows a live preview on a checkerboard and offers presets (none, sm, md, lg, full, organic). Elliptical mode emits CSS slash syntax (`10px / 20px`). Simple values stay as compact shorthand; asymmetric or elliptical radii also show expanded longhand.

So funktioniert's

  1. Choose linked/custom and a unit
  2. Tune radii with sliders
  3. Preview and copy the CSS

FAQ

What is a border-radius generator?

A tool that visually builds CSS border-radius values you can copy.

What are elliptical corners?

Each corner can use different horizontal and vertical radii. In CSS that becomes slash syntax like `border-radius: 20px / 10px;`.

Are settings sent externally?

No. All processing runs in your browser.

What is the full preset for?

A large radius for pills, capsules, and circular buttons.