CSS Border-Radius Generator

Drag the eight sliders — every corner has a horizontal (h) and a vertical (v) axis — and watch the preview round, ellipse, leaf, blob, or pill itself into shape. Pick one of twelve shape presets to start. The output below collapses to the shortest correct CSS form, so a square corner emits nothing and a perfect circle emits just 50%. Pure client-side, no upload.

Preview

Drag the sliders or pick a preset

Shape presets

Corners (h = horizontal, v = vertical)

Top-left h 0% v 0%

Top-right h 0% v 0%

Bottom-right h 0% v 0%

Bottom-left h 0% v 0%

Link opposite corners (drag one, the opposite follows) Link all corners (drag one, all four follow)

CSS

Shorthand

Longhand (8 values)

Per-corner

Custom selector

Type a CSS value (overrides the sliders)

Accepts 1, 2, 3 or 4-value shorthand, with an optional / ellipse form. px and % units are supported.