CSS Border Radius Generator
Compose CSS border-radius (including squircle-style elliptic radii) with live preview.
Overview
The CSS Border Radius Generator builds a border-radius declaration with live preview, supporting both the four-corner shorthand and the elliptic horizontal / vertical syntax that produces the squircle-style organic curves popular in modern UI design. Drag sliders per corner or type values directly in px, %, or rem.
It is for designers and front-end engineers learning how to round only some corners of a CSS box or how to create a squircle shape with border-radius. Useful for buttons, cards, avatars, and the asymmetric pill shapes common in chat-bubble UIs.
How it works
The CSS Backgrounds and Borders Module defines border-radius as a shorthand for four corners (top-left, top-right, bottom-right, bottom-left, clockwise). Each corner can take one length for a circular curve or two lengths separated by / for elliptic curves that bend differently on the horizontal and vertical axes — the squircle effect.
Percentages are computed against the box's own width and height (per axis), which is why a 50% radius produces a perfect circle on a square element. The generator emits the most compact valid shorthand: a single value when all four corners agree, two or three values when symmetry allows.
Examples
- All corners
12px→border-radius: 12px;. - A pill button →
border-radius: 999px;(any large value larger than half the height). - An asymmetric chat bubble →
border-radius: 16px 16px 16px 4px;. - A squircle →
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;.
FAQ
What's the difference between px and % radii?
Pixels are absolute; percentages are relative to the box dimensions on each axis. Percent radii on non-square boxes always produce elliptic curves.
Why does my radius look ignored at large values?
The browser caps each radius so adjacent corners don't overlap. If left + right radii exceed the width, they shrink proportionally.
How do I make a true circle?
Set border-radius: 50% on a perfectly square box. Otherwise you get an ellipse.
Do border-radius and clip-path overlap?
Both can produce rounded shapes, but border-radius participates in layout and is animatable per corner. Use clip-path only for irregular non-rectangular shapes.