Border Radius Previewer

Design Perfect Rounded Corners Visually

The CSS border-radius property transforms sharp rectangular elements into shapes with rounded corners, circles, pills, and organic blobs. It is one of the most frequently used CSS properties in modern web design, appearing on buttons, cards, avatars, input fields, and modal dialogs. Despite its apparent simplicity, getting the exact radius right by editing numbers in code is a trial-and-error process that interrupts your design flow.

This visual previewer lets you drag sliders and see the result instantly on a live element. When it looks right, copy the CSS and move on.

Understanding Border Radius Values

The border-radius shorthand accepts one, two, three, or four values. One value applies uniformly to all corners. Two values set top-left/bottom-right and top-right/bottom-left as pairs. Four values address each corner individually in clockwise order: top-left, top-right, bottom-right, bottom-left.

Each corner can also take two values separated by a slash to create elliptical corners — one value for the horizontal radius and one for the vertical. This produces asymmetric curves useful for organic shapes and creative UI elements. The tool handles both circular and elliptical radius modes.

Common Patterns and Recipes

A border-radius of 4 to 8 pixels is the industry standard for subtle rounding on cards and containers. Buttons typically use 6 to 12 pixels, or a large value like 9999px to create a pill shape that adapts to any content width. Setting border-radius to 50% on a square element produces a perfect circle, which is the standard technique for avatar images.

Asymmetric radii create distinctive shapes. A large radius on only the top corners produces a tab-like appearance. Different radii on adjacent corners generate organic, blob-like forms popular in contemporary design.

From Experimentation to Production

The tool generates the most concise valid CSS syntax for your configuration. If all corners are equal, it outputs a single value. If corners differ, it uses the appropriate shorthand. The output is clean, standards-compliant CSS ready to paste into any project — vanilla CSS, Tailwind arbitrary values, styled-components, or CSS modules.