Border Radius Preview: Generate CSS Rounded Corners Visually

CSS border-radius looks simple until you need different values for each corner, or you want to create organic shapes with the eight-value syntax. A visual preview tool lets you see the exact shape as you adjust each corner, so you get the result you want without guesswork.

How CSS Border Radius Works

The border-radius property rounds the corners of an element. At its simplest, a single value rounds all four corners equally:

border-radius: 16px;

Four-Corner Shorthand

You can set each corner individually using the four-value shorthand. Values go clockwise starting from the top-left:

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 16px 8px 16px 8px;

Individual Corner Properties

For maximum control, CSS provides a longhand property for each corner:

border-top-left-radius: 16px;
border-top-right-radius: 8px;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 8px;

Percentage Values

Percentages are relative to the element’s dimensions. Setting border-radius: 50% on a square element creates a perfect circle. On a rectangle, 50% creates an ellipse.

/* Perfect circle (on a square element) */
border-radius: 50%;

/* Pill shape (on a wide rectangle) */
border-radius: 9999px;

Common Border Radius Patterns

Subtle Rounding

A small radius (4-8px) softens harsh corners without dramatically changing the shape. This is the default for most UI frameworks.

border-radius: 8px;

Used for: Buttons, input fields, small cards, badges in traditional designs.

Medium Rounding

A moderate radius (12-16px) creates a friendlier, more modern appearance. This is the sweet spot for most card-based layouts.

border-radius: 16px;

Used for: Cards, containers, image thumbnails, modal dialogs.

Large Rounding

Values of 24px and above create distinctly organic, approachable shapes. This is characteristic of Material Design 3 and other modern design systems.

border-radius: 24px;

Used for: Feature cards, hero sections, prominent containers.

Pill Shape

Using a very large value (9999px or 50% on equal dimensions) creates a fully rounded shape. This is the standard for modern button designs.

border-radius: 9999px;

Used for: Buttons, chips, tags, badges, toggle switches.

Asymmetric Rounding

Mixing different values per corner creates distinctive shapes that add visual interest and break the monotony of uniformly rounded boxes.

/* Rounded on top, square on bottom */
border-radius: 16px 16px 0 0;

/* Organic blob shape */
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

The Slash Syntax for Elliptical Corners

The full border-radius syntax supports a slash (/) to define different horizontal and vertical radii, creating elliptical corners instead of circular ones:

/* horizontal-radii / vertical-radii */
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

This is how designers create organic blob shapes, speech bubble effects, and other non-circular rounded forms. The visual preview makes this much easier to work with than writing the values manually.

How to Use Our Border Radius Preview Tool

Adjust each corner using the sliders or input fields for top-left, top-right, bottom-right, and bottom-left
Preview the shape in real time as values change
Link or unlink corners to edit them together or independently
Copy the CSS when the shape matches your design

Tips

Link all corners for uniform rounding, then unlink to fine-tune individual corners
Use percentage values when you need the radius to scale with the element size
For pill-shaped buttons, use 9999px rather than 50% to avoid elliptical distortion on non-square elements
Preview at different element sizes to make sure the radius looks right at various dimensions

Choosing the Right Radius

Match Your Design System

Consistency matters more than any specific value. If your design system uses 8px radius on cards, use 8px everywhere for cards. The border radius preview tool helps you settle on values before committing them to your design tokens.

Consider the Element Size

A 24px radius looks generous on a large card but overwhelms a small badge. Scale your radius proportionally to element size. A rough guide:

Element Size	Suggested Radius
Small (badges, chips)	4-8px or 9999px (pill)
Medium (buttons, inputs)	8-12px or 9999px (pill)
Large (cards, containers)	16-24px
Extra large (hero sections)	24-48px

Avoid Over-Rounding

When the radius exceeds half of the element’s shortest side, the browser clamps it. This means border-radius: 100px on a 40px-tall button looks identical to 9999px. Use the preview to verify the visual result matches your expectation.

Frequently Asked Questions

What is the difference between px and % for border-radius? Pixel values are absolute. Percentage values are relative to the element’s width (for horizontal radii) and height (for vertical radii). On a square element, 50% creates a circle. On a rectangle, 50% creates an ellipse.

Can I animate border-radius? Yes. Border-radius is animatable with CSS transitions and keyframes. Transitioning between different radius values creates smooth morphing effects, which is popular for hover states and loading animations.

Why does my circle look like an ellipse? If you use border-radius: 50% on a rectangular element, the radius is calculated from both width and height, producing an ellipse. Make the element square (equal width and height) for a perfect circle.

What is the slash syntax? The slash separates horizontal and vertical radii: border-radius: 10px 20px / 30px 40px. The values before the slash control horizontal rounding, and the values after control vertical rounding. This creates elliptical corners.

Try our free Border Radius Preview to generate perfect CSS rounded corners visually.