Frontend & CSS

Border Radius Generator

Set each corner radius with a live preview.

Controls

Top leftTop rightBottom rightBottom left

border-radius: 20px 20px 20px 20px;

Set each of the four corners independently and copy the border-radius declaration.

Use 20, 20, 0, 0 for a card with rounded top corners.

Design linear or radial gradients and copy the CSS.

Tune shadows visually and copy the CSS.

Create coordinated shades from a base color.