🎨 Color Tools

CSS Border Radius Generator

Build CSS border-radius visually. Per-corner control and ellipse support. Copy CSS. Free.

Width / Height (px)

Per-corner ellipse

CSS · click to copy

How to use the Border Radius

border-radius shorthand

The simplest form is one value: border-radius: 10px rounds all four corners equally. Two values are top-left/bottom-right and top-right/bottom-left. Four values go top-left, top-right, bottom-right, bottom-left (clockwise from top-left). Use 50% on a square to make a perfect circle.

Elliptical corners

Use the syntax border-radius: H / V to make corners elliptical — the value before the slash sets horizontal radius, after the slash sets vertical. For example 50px / 25px creates oval corners. Each corner can have its own ellipse for fancy organic shapes.