Border Radius Generator

Visual border-radius designer · Live preview · Copy CSS · Free

Settings

Lock all corners together

Top Left 12px

Top Right 12px

Bottom Right 12px

Bottom Left 12px

Unit

Presets

Element color

Background

css • output

CSS Border Radius Syntax

The CSS border-radius property can accept 1–4 values specifying each corner independently: top-left top-right bottom-right bottom-left. Use a single value for a uniform rounded shape, or different values for asymmetric designs. The % unit is calculated relative to element dimensions.

Related Design Tools

Color Palette Gradient Generator CSS Shadow SVG Optimizer CSS Grid All Tools