CSS Border Radius Generator

How this generator works

Whatever you type in the Radius field is inserted verbatim into a border-radius declaration wrapped in a .box rule, then shown in the output box ready to copy. That means the field accepts any valid value: a single length, a percentage, one-to-four corner values, or the horizontal / vertical elliptical syntax. It runs in your browser with no network calls.

Worked example

Typing 12px gives:

.box {
  border-radius: 12px;
}

Typing 40px 40px 0 0 rounds only the top corners; typing 50% / 30% gives every corner an elliptical curve half the box width and a third of its height.

border-radius shorthand

Percentages resolve against the element's own width (horizontal radii) and height (vertical radii), so they scale as the box resizes. Fixed lengths do not.

When you would use it

Prototyping card and button styles, matching a rounded avatar, building pill-shaped tags, or nailing the exact per-corner values for a speech-bubble or tab shape without counting commas by hand.

FAQ