◖

Border Radius Generator

Visualise and generate CSS border-radius in real time. Simple rounded corners or full elliptical control — copy the CSS instantly.

Mode

Radius

16px

Unit

Fine control (0–50)

Output Options

CSS variable output
Shows --radius: instead of inline

Live Preview

240 × 240 px

Width 240px

Height 240px

Background

Custom

CSS Output

Preset Shapes Click to apply

How to use

Pick a preset shape, or switch to Advanced mode for per-corner control.
Drag the radius slider (or each corner's H/V inputs) and resize the box live.
Hit Copy to grab the generated border-radius CSS for your stylesheet.

FAQ

Simple mode applies a single radius value to all four corners. Advanced mode lets you control each corner independently, including elliptical shapes with separate horizontal and vertical radii.

Set border-radius to 50% on a square element (equal width and height). The Circle preset does this automatically.

Use pixels for consistent corners regardless of element size — great for buttons and cards. Use percentages when corners should scale with the element, like circles or pills that adapt to any size.