Fast, practical, browser-based developer tools
Create custom rounded corners, preview the shape live, and copy the generated CSS instantly. Adjust each corner separately to build border-radius styles for cards, buttons, inputs, containers, banners, and modern interface components without writing the CSS manually.
Border radius is one of the most common styling properties in modern UI design. Rounded corners can make components feel softer, more modern, and more approachable. They are widely used in cards, buttons, inputs, avatars, modal windows, and content containers across websites and apps.
This border radius generator is designed to work directly in your browser. Your selected corner values and generated CSS can be handled locally on your device during normal use.
For more details about site usage and analytics, read our Privacy Policy.
Move each slider to adjust the radius of a specific corner. The live preview updates automatically so you can see the shape instantly. When the result looks right, copy the CSS and paste it into your stylesheet or component.
border-radius: 24px 24px 24px 24px;
The mental model most people carry — that border-radius sets the size of a
quarter-circle in each corner — is only half the property. Each corner actually has
two radii: one horizontal and one vertical. When they are equal you get a
circular arc; when they differ you get an ellipse. The slash syntax exposes both. In
border-radius: 50% / 30%, the value before the slash sets all four
horizontal radii and the value after sets all four vertical radii, so each
corner bulges wider than it is tall.
This is the mechanism behind the "blob" and "leaf" shapes you see in modern UI. Give the two
sides of the slash different multi-value lists — for example
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% — and each corner gets its own
asymmetric ellipse, producing an organic, hand-drawn silhouette out of a plain rectangle. A
four-corner tool that only offers one number per corner cannot express these; you need the
horizontal-and-vertical pair per corner to build them.
A percentage radius is measured against the box's dimensions — the horizontal radius against
the width, the vertical radius against the height. That has two consequences worth
internalising. First, border-radius: 50% turns a square into a perfect
circle, but on a rectangle it produces an ellipse, because 50% of a wide width is a larger
radius than 50% of a short height.
Second, this is why a pill button uses a big pixel value rather than a percentage.
border-radius: 50% on a wide, short button gives you an oval, not a stadium
shape. The reliable pill is a length larger than half the element's height —
border-radius: 9999px is the common idiom. It reads as "round the ends as much
as geometrically possible," and because browsers clamp any radius that would overflow, the
corners settle at exactly half the height no matter how tall the button grows. That makes it
robust to font-size and padding changes in a way a hardcoded 20px is not.
Set border-radius: 80px on a box that is only 100px tall and put a different
large radius on the corner below it, and you will find the rendered corners are smaller than
80px. This is not a bug. When the radii of two corners that share an edge add up to more than
the length of that edge, the browser scales all the radii down by the same
factor until they fit. The corners cannot physically overlap, so the specification tells the
browser to shrink them proportionally rather than let one eat into the other.
The practical upshot: your carefully chosen pixel values are upper bounds, not guarantees, on
small or narrow elements. If a rounded corner looks "capped," the element is shorter or
narrower than the sum of the radii you asked for. It is also why 9999px is safe
for pills — the browser clamps the absurd value down to the largest radius that fits, which
for a rectangle is exactly half the shorter dimension.
The longhand order is clockwise from the top-left:
border-radius: top-left top-right bottom-right bottom-left. Two values mean
top-left/bottom-right then top-right/bottom-left; three values fill in a symmetric pattern.
With the slash you can specify up to eight numbers in total — four horizontal radii before it
and four vertical radii after — which is the maximum expressiveness the property allows.
Two things to keep straight. border-radius clips the border, background, and box
shadow to the rounded outline, but it does not clip overflowing child content on its
own — a child image with square corners will still poke out unless you add
overflow: hidden to the rounded parent. And rounding does not change the
element's box for layout: the corners are cut visually, but the element still occupies its
full rectangular space, so siblings and hit-testing behave as if the corners were square.
border-radius: 50% / 30% mean?It separates horizontal from vertical radii. The value(s) before the slash set the horizontal radius of each corner; the value(s) after set the vertical radius. When they differ, the corners become elliptical rather than circular — the basis of organic "blob" shapes.
border-radius: 50% make an oval instead of a circle?Percentages are relative to the element's own width and height. On a square, 50% gives a circle; on a rectangle, 50% of the width is a bigger radius than 50% of the height, so you get an ellipse. Use a square element, or a large fixed length, for the shape you want.
Use a large length such as border-radius: 9999px, not 50%. The
browser clamps it to the largest radius that fits, which is half the button's height, so
the ends stay fully rounded even as padding or font size change. 50% would
make an oval on a wide button.
When two corners sharing an edge have radii that together exceed that edge's length, the browser scales every radius down proportionally so they cannot overlap. On small or narrow elements your pixel values act as upper limits, not exact sizes.
border-radius clip an image inside the element?
Not by itself. It rounds the element's own border, background, and box shadow, but a child
with square corners will overflow past the curve. Add overflow: hidden (or
clip) to the rounded parent to trim the child to the same shape.
No. The rounding is purely visual. The element still occupies its full rectangular area for layout, spacing, and pointer hit-testing — only the painted corners are cut away.