CSS Border Radius Generator
Round the corners of any element — set a uniform radius or tune each corner, preview it, and copy the CSS.
- Free
- No account
- Runs in your browser
- Nothing uploaded
border-radius: 12px;
Runs entirely in your browser — your input is never uploaded, logged, or stored.Privacy policy
What is CSS Border Radius Generator?
The CSS border-radius property rounds the corners of an element. A value of 0 leaves corners sharp; larger values curve them into a pill or a shape, and you can make the curve itself elliptical by setting two comma-pointer values. It is the single property behind pill buttons, rounded cards, and circular avatars — the quiet detail that keeps a modern interface from feeling harsh or boxy.
border-radius accepts either one value (applied to all four corners), or four values in the order top-left, top-right, bottom-right, bottom-left. That one-or-four quirk is exactly what trips people up, so this tool handles both: switch to uniform mode for a single radius, or per-corner mode to give each corner its own number.
Choosing the right number is mostly a feel thing, but two rules of thumb help. Small radii in the 2-8px range add polish without shouting; large radii change the whole personality of a component, turning a square button into a rounded pill. How round a corner actually appears also depends on the element's size — a 12px radius looks gentle on a wide card but pronounced on a small badge — which is exactly why a live preview matters.
The live preview renders the exact border-radius you generate, so the corner you see is the one you copy, at roughly the size you'll use it at.
CSS Shorthand reference, per the CSS Backgrounds and Borders Module Level 3 (border-radius):
• border-radius: <r>; — one value applied to all four corners. • border-radius: <tl> <tr> <br> <bl>; — four values in clockwise order starting top-left.
Values are px lengths (percentages are valid but not used here). Radii are clamped to 0-200px so a stray slider position cannot produce an invalid string. Larger radii make corners rounder; beyond half the element's smaller side the corners merge, producing a pill for a wide rectangle or a circle for a square.
This generator emits a single radius for uniform mode, or the four-value shorthand for per-corner mode — both valid browsers accept them as-is.
Worked examples
- uniform 12px → border-radius: 12px;
- uniform 0px → border-radius: 0px; (sharp corners)
- per-corner 16px 8px 16px 8px → border-radius: 16px 8px 16px 8px;
- per-corner 50px 50px 50px 50px → border-radius: 50px 50px 50px 50px; (circle on a square)
How to use CSS Border Radius Generator
- Choose uniform to round all four corners equally, or per-corner to tune each.
- Drag the radius slider(s) and watch the preview round the element.
- Use a large radius (half the element's size or more) for a pill or circle.
- Copy the generated CSS and paste it into your stylesheet.
Common errors
- My circle isn't round — border-radius rounds proportionally to the element, so on a wide rectangle a single large radius makes a pill, not a circle. Use equal width/height to get a true circle.
- I set four values but only saw one — make sure you're in per-corner mode; uniform mode applies a single radius to all corners.
- The corner isn't as round as I expected — the radius is measured from the corner inward, so it must be at least half the side length to fully round that side.
- Negative values did nothing — border-radius radii are non-negative; this tool clamps them to 0.
FAQ
What does the four-value border-radius order mean?
The four values run clockwise starting at the top-left: top-left, top-right, bottom-right, bottom-left. So 16px 8px 16px 8px rounds the top-left and bottom-right corners by 16px and the top-right and bottom-left by 8px.
How do I make a circle or a pill?
A circle needs a square element with a radius equal to half its side (e.g. 50px on a 100px square). A pill is a wide rectangle with a large radius — for example 999px on a button — because the browser clamps it to half the shorter side.
What is the difference between uniform and per-corner mode?
Uniform applies one radius to all four corners, emitting border-radius: <r>. Per-corner gives each corner a separate value and emits the four-value shorthand. Both produce valid CSS.
Can I combine my radius with a border or background?
Yes. border-radius is independent — it clips the element's background, border, and box-shadow to the rounded shape. It is commonly combined with background-color and border to style cards and buttons.
Related tools
Prefer AllUtil on Google
One click adds AllUtil to your Google preferences. You'll see our tools highlighted with a Preferred badge in Search and AI answers.