CSS border-radius generator
This tool rounds the corners of an element and gives you the exact border-radius value to paste into your stylesheet. It is for developers and designers shaping buttons, cards, avatars and pills who want precise, copy-ready CSS. The preview shows a live box that reshapes as you drag.
How it works
The border-radius property accepts either a single value applied to all corners or up to four values written clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. With Link all corners on, moving any slider sets all four equally. With it off, each corner gets its own value. The generator detects when all four match and collapses the output to the shorthand single value; otherwise it writes all four in clockwise order.
Common shapes and when to use them
| Goal | border-radius value | Notes |
|---|---|---|
| Subtle card rounding | 8px | Standard for elevated content surfaces |
| Prominent card or modal | 16px | Friendlier, common in modern design systems |
| Button or badge | 6px–8px | Rounds without looking circular |
| Pill (wide elements) | 9999px | Safe large value; element width determines actual curve |
| Circle (square element) | 50% | Percentage is relative to the element’s own dimensions |
| Top corners only | 16px 16px 0 0 | Typical for tabs attached to a panel below |
| Bottom corners only | 0 0 16px 16px | Cards that sit at the bottom of a container |
| Asymmetric blob | e.g. 30% 70% 70% 30% / 30% 30% 70% 70% | The extended two-value syntax (not generated here) allows independent x/y radii per corner |
Practical tips
Overflow clipping: If you apply border-radius to a container and a child image or element still bleeds past the curve, add overflow: hidden to the container. The browser clips children to the rounded box automatically once overflow is hidden.
Using 50% vs a large pixel value: 50% on a non-square element creates an ellipse rather than a circle. For true circles, ensure the element’s width and height are equal, or use a large pixel value like 9999px as a safe maximum that the browser clamps to a true semicircle regardless of element size.
Percentage behaviour when resizing: Pixel values stay fixed as the element scales; percentage values scale proportionally with the element’s dimensions. For buttons that resize fluidly, a %-based radius keeps the corner proportion consistent.
The full eight-value syntax: CSS allows independent horizontal and vertical radii per corner, written as border-radius: h1 h2 h3 h4 / v1 v2 v3 v4. This creates elliptical rather than circular corners and is how you produce the organic blob shapes popular in illustration-heavy designs. This generator outputs the standard circular syntax; for elliptical corners, extend the output with the slash notation manually.
The border-radius value is generated locally in your browser — nothing is uploaded.