CSS Border Radius Visualizer

Tweaking border-radius by editing CSS, refreshing, squinting at the result, then editing again is the kind of feedback loop that wastes ten minutes on what should be a thirty-second decision. Especially when you want different radii on each corner and need to see the whole shape evolve.

Dragging the four corner inputs here updates the preview as you move them. The output CSS — both shorthand and longhand forms — sits next to the preview ready to copy. Asymmetric values, elliptical radii (the slash syntax), and pill shapes all work, and the preview shows exactly what a real element with those values would look like at the size you set.

Useful when designing buttons, cards, avatars, or any UI element where the corner geometry needs to feel deliberate rather than rounded by default.

The property itself is more flexible than most people use it. CSS border-radius accepts up to eight values: four corners, each with separate horizontal and vertical radii. The shorthand collapses these into one to four numbers when corners are symmetric, but the full longhand form (border-top-left-radius, border-top-right-radius, etc., each accepting two values for elliptical corners) is what the browser actually computes against. The visualizer exposes both forms because the longhand is what you need when any corner has a different horizontal versus vertical radius — the slash syntax in the shorthand can't express asymmetric corners cleanly.

A worked example: a button that's 200px × 48px with a 24px radius produces a pill on the short axis but flat-ish corners on the long axis if you use percentages. Set border-radius: 50% and you get an ellipse, not a pill. The pill comes from a fixed value greater than half the height (24px works, or the lazy 9999px which clamps to half the shorter side). The visualizer shows this immediately; the alternative is shipping the wrong shape and getting a Slack message at 4pm.

Where the tool runs out of usefulness is animated radii. Border-radius can be animated, but the interpolation between two shapes (especially asymmetric ones) is sometimes visually unpleasant — corners can flex in unintended ways through intermediate frames. If you're animating, preview the start and end values here, then test the actual transition in your live page. The static preview can't show you a janky interpolation.

The other gap: clipping behavior with shadows. A box-shadow rendered outside the element follows the rounded corner; an inset shadow respects the same curve. Outline (the focus ring) does not — outline is rendered as straight lines around the bounding box and ignores border-radius until very recent browsers. The newer outline-style with rounded corners only works in modern browsers, so test focus rings with a real keyboard if accessibility matters.