What's the difference between px and % radius?

Pixels give a fixed corner curve regardless of element size. Percentages scale with the element — 50% on a square makes a perfect circle. Use px for buttons and cards, % for pills, circles, and blob-like shapes.

Why does `border-radius: 50%` not always make a circle?

50% radius makes an ellipse that fills the bounding box. Only perfectly square elements become circles. For oblong elements, either set equal width/height, use `border-radius: 9999px` for pill shapes, or adjust element size.

Can I set different horizontal and vertical radii per corner?

Yes — the full CSS syntax is `border-radius: a b c d / e f g h` where letters a-d are horizontal radii and e-h are vertical. This tool uses uniform radii per corner for simplicity; paste the output into your own stylesheet to refine further.

CSS Border Radius Generator

Developer Tools· 24 tools

Free CSS border-radius generator. Round the four corners of an element independently (top-left, top-right, bottom-right, bottom-left), preview the result on a live box, and copy either shorthand or per-corner CSS. Supports both pixel and percentage units for pill or organic blob shapes.

Unit

Link all corners

Top-left16px

Top-right16px

Bottom-right16px

Bottom-left16px

CSS

border-radius: 16px;

Frequently Asked Questions

Related Tools

CSS Gradient Generator
Create beautiful linear and radial CSS gradients with a live preview and copy-ready code.
CSS Box Shadow Generator
Visual CSS box-shadow generator with live preview. Adjust offset, blur, spread, color, and inset. Copy production-ready CSS.
WCAG Color Contrast Checker
Check color contrast against WCAG 2.1 AA and AAA standards. Verify accessibility for text and UI.