Border Radius Previewer
Build CSS border-radius values visually. Adjust each of the four corners independently — or all at once. Compatible with the border-radius: a b c d / e f g h elliptical syntax.
What you'll use this for
border-radius is the simplest way to soften the look of any boxed element — and with per-corner control, you can build distinctive shapes too.
Card design
Round the corners of feature cards, ad units, or hero panels.
Button design
Pick the exact rounding that matches your design system — 4px, 9999px, anywhere between.
Profile pictures
Set border-radius: 50% for round avatars, or asymmetric corners for a chat-bubble look.
Shape design
Combine elliptical radii to fake leaf or petal shapes without SVG.
How to build a border-radius
Pick a corner
Adjust each of the four corners independently using its slider, or toggle "Same all corners" to move them together.
Tweak each value
Use the number input for pixel-perfect adjustment. Hit large values for pill shapes; small for subtle softening.
Try ellipses
Enable the ellipse toggle to give each corner two radii (horizontal and vertical) — handy for organic shapes.
Copy the CSS
The generated value uses the shorthand syntax. Paste it into your stylesheet directly.
Frequently asked questions
Yes. The generated CSS is valid and can be pasted directly into a stylesheet, style attribute, or CSS-in-JS string.
border-radius is supported in every evergreen browser. The shorthand and per-corner longhand are both universally available.
Yes. No signup, no limits, no ads.
It separates the horizontal radii from the vertical radii. border-radius: 20px / 10px produces an elliptical corner that is wider than it is tall.
It guarantees a pill shape regardless of element width: the radius caps automatically at half the smaller dimension. Same as border-radius: 50vh for round-ended search bars.
About CSS border-radius
The CSS border-radius property rounds the corners of an element. It accepts 1 to 4 length values for the horizontal radii and an optional second set (after a /) for vertical radii — letting each corner be either circular or elliptical.
Syntax patterns
border-radius: 8px;— all four corners.border-radius: 8px 16px;— TL+BR, TR+BL.border-radius: 8px 16px 24px 32px;— TL, TR, BR, BL.border-radius: 20px / 10px;— elliptical corners.
Browser support
- Supported everywhere since 2010. No prefixes needed.
- Combines well with
overflow: hiddento clip child elements to the rounded corner. - See the MDN reference.