6XC

CSS Border Radius Generator

Round each corner individually or all at once, in px or %, with live preview and copyable CSS.

963 views

Unit

The border-radius Property

Shorthand order is border-radius: top-left top-right bottom-right bottom-left. Pixels give fixed rounding; percentages scale with the box — 50% on a square makes a perfect circle. Uneven values create organic "blob" shapes popular in modern hero sections.

Frequently Asked Questions

How do I make a circle or a pill?

A square element with border-radius: 50% becomes a circle. A rectangle with a large fixed radius (e.g. 999px) becomes a pill.

px or % — which should I use?

Use px when corners must look identical across sizes (cards, buttons). Use % when the rounding should scale with the element, like circles and blobs.

Similar Tools

CSS Gradient Generator Design linear, radial and conic CSS gradients with live preview and copy the code. Generate CSS Box Shadow Generator Design a box-shadow visually — offsets, blur, spread, color, opacity and inset — with live preview. Generate CSS Text Shadow Generator Design a text-shadow with offsets, blur, color and opacity — live preview on sample text. Generate CSS Border Generator Design a border visually — width, style (solid, dashed, dotted, double…), color and radius — with live preview. Generate