ToolToUse

Color & Design

Border Radius Generator

Round each corner independently, watch the shape update live and copy a clean border-radius declaration.

Color & design

Corner radius builder

Local only
Preview
border-radius: 16px;
Rendered locally

The preview uses your browser's own CSS engine, so the result matches your site exactly.

How border-radius shorthand works

One value rounds all four corners. Four values are applied clockwise starting at the top left. Percentages are relative to the element's own width and height, which is why 50% turns a square into a circle.

Choosing a radius

  • 4–8px feels crisp and technical.
  • 12–20px reads as friendly and modern — the most common choice for cards.
  • 999px creates a pill shape regardless of element height.

Good to know

Frequently asked questions

How do I make a perfect circle?

Switch the unit to percent and set every corner to 50% on an element with equal width and height.

What is a pill button?

Any very large pixel radius, commonly 999px, which clamps to half the element height automatically.

Why does percent look different on wide elements?

Percentages are calculated separately for the horizontal and vertical axis, so wide boxes get elliptical corners.

Does a radius clip the content?

Only if you add overflow: hidden. Otherwise child elements can still paint over the rounded corners.

Keep exploring

View all

Color & Design

Color Converter

Convert colors between HEX, RGB and HSL with a live preview.

Open tool
Popular

Color & Design

Color Picker

Pick any color and read its HEX, RGB and HSL values instantly.

Open tool

Color & Design

HEX to RGB Converter

Turn a HEX color code into RGB and CSS-ready values.

Open tool