The Border Radius Previewer lets you build and fine-tune CSS border-radius values against a live shape, then copy the exact declaration into your stylesheet. Instead of guessing at pixel values and reloading your app, you adjust each corner and watch the geometry update in real time — including the asymmetric, eight-value forms that most people never write by hand.
The key thing this border radius generator exposes is that border-radius is shorthand for four longhand properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius, applied clockwise from the top-left. Each corner can take two values — a horizontal and a vertical radius — separated by a slash in the shorthand (for example, border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%). That second axis is what turns a plain rounded rectangle into an organic, blob-like curve.
Because this css border-radius previewer renders the shape with the same engine your browser uses, what you see is exactly what ships. It is the fastest way to reason about rounded corners css when the values stop being a single uniform number and start becoming per-corner elliptical curves.
Building a value step by step
- 1
Start from the preview box and drag the corner handles, or type into the per-corner inputs, to set each of the four radii independently rather than one global value.
- 2
Switch units between px, %, em, or rem to see how the curve responds — percentages scale with the element's own width and height, while px stays fixed regardless of box size.
- 3
Enable the horizontal/vertical (elliptical) mode to give each corner two radii separated by a slash, which is how you create asymmetric, egg-like or leaf-like shapes.
- 4
Resize the preview container to confirm the shape holds up at different dimensions, since percentage-based radii deform as the box's aspect ratio changes.
- 5
Copy the generated border-radius declaration and paste it straight into your CSS, or grab the four longhand properties if you need to animate or override a single corner.
When you'll reach for it
Organic blob shapes
Design systems and hero sections increasingly use soft, asymmetric blobs behind avatars or illustrations. The elliptical eight-value syntax makes these possible without SVG, and previewing beats hand-tuning eight numbers.
Pill buttons and cards
Dial in a fully rounded pill (a large px value or 9999px) or a subtle card radius, and check that the curve reads correctly at your actual button height before committing it to a component.
Asymmetric UI accents
Chat bubbles, tab shapes, and callouts often round three corners and leave one sharp. Setting corners individually here mirrors that pattern exactly and gives you copy-paste-ready output.
Matching a design spec
When a designer hands off a Figma value, use the previewer to reproduce it precisely and confirm the px-versus-percent choice behaves the same across the sizes your component ships in.
Practical notes and gotchas
- For a perfect circle or capsule, percentages beat guessed pixels: border-radius: 50% turns any square into a circle and any rectangle into an ellipse, no matter its size. A very large px like 9999px reliably produces a pill on variable-width buttons.
- When two adjacent corners' radii would overlap, browsers proportionally shrink all radii to fit the box — so a 200px radius on a 100px-tall element caps out; don't be surprised when the rendered curve is smaller than your input.
- Percentage radii are computed against the box's own width (horizontal component) and height (vertical component) separately, which is why a percentage-based corner distorts when the element's aspect ratio changes but a px value does not.
- If you clip content with border-radius, remember it does not clip child elements by default — add overflow: hidden on the parent, or an image with square corners will poke past the rounded container.
- border-radius is animatable and GPU-cheap, so transitioning it on hover is smooth, but interpolating between a single-value and an eight-value form can jump — keep both the start and end states in the same syntax for a clean tween.
Common questions
What does the slash in a border-radius value mean?+
The slash separates horizontal radii from vertical radii. Everything before it sets the four corners' horizontal radius and everything after sets their vertical radius, producing elliptical rather than circular corners — for example, border-radius: 40px / 20px.
What order do the four corner values go in?+
Clockwise starting from the top-left: top-left, top-right, bottom-right, bottom-left. If you supply fewer than four values, missing corners mirror the opposite one, so two values set top-left/bottom-right and top-right/bottom-left.
Should I use px or percentages for rounded corners?+
Use px when you want a consistent curve regardless of element size, and percentages when the radius should scale with the box. Percentages are ideal for circles (50%) and shapes that must stay proportional across breakpoints.
Why isn't my border-radius clipping the image inside the element?+
border-radius rounds the element's own border box but does not automatically clip descendants. Add overflow: hidden (or clip) to the rounded parent, or apply the same radius to the child, so overflowing content is trimmed to the curve.
Is border-radius supported in all browsers?+
Yes. Unprefixed border-radius, including the four longhand properties and the elliptical slash syntax, is supported in every modern browser and has been for well over a decade, so no vendor prefixes are needed.
Can I animate border-radius?+
Yes, border-radius is an animatable property and transitions smoothly, including on hover. For the cleanest interpolation, keep the start and end values in the same syntax and value count so the browser can tween each corner directly.