CSS Border Radius Generator

How do you generate rounded corners for a CSS element?

Choose a preset, set the box dimensions to match your element, and copy the generated declaration. For a concrete starting point, select px, enter 240 in Width (px) and 120 in Height (px), then click Pill. The preset takes half the smaller dimension: min(240, 120) / 2 = 60. All corners receive a 60px radius, so the CSS output is border-radius: 60px;. Apply it to an element with those dimensions to reproduce the capsule.

Choose Rounded on the same box to replace that shape with 16px corners. For an asymmetric shape, uncheck Link all corners and change the individual fields. Sliders and numeric fields offer precise adjustments; the preview handles support dragging and keyboard input. Focus a handle and use an arrow key to change a radius by one pixel, or hold Shift for ten-pixel steps. These increments use stored pixels even when another output unit is selected.

How does the border-radius shorthand describe each corner?

CSS Backgrounds and Borders Module Level 3 defines the corner order as top-left, top-right, bottom-right, then bottom-left. Four distinct values describe each corner explicitly. The generator shortens repeated patterns automatically: four equal corners become one value; equal opposite corners become two; matching top-right and bottom-left corners allow three. A shorter declaration preserves the same radii rather than discarding a corner setting.

For example, Leaf starts with 0px 48px, alternating square and rounded corners. Tab starts with 24px 24px 0px 0px, rounding only the upper corners. These values describe the initial presets when the box is large enough to accommodate them. Smaller dimensions can reduce preset radii, so inspect the output after setting your intended width and height.

What is the difference between circular and elliptical corners?

A circular corner has equal horizontal and vertical radii. An elliptical corner has different radii along its two axes. Enable Horizontal / Vertical split to edit those axes separately. The generated shorthand puts horizontal values before a slash and vertical values after it. Each side of the slash uses the same clockwise corner order and can independently collapse repeated values.

The Blob preset supplies 40px 60px 30px 70px / 70px 30px 60px 40px on a sufficiently large box. Its top-left corner is 40px wide and 70px tall, while the top-right reverses the emphasis with 60px horizontally and 30px vertically. This is an asymmetric rounded rectangle rather than a custom vector outline. The generator omits the slash whenever the formatted horizontal and vertical sequences match.

How do px, percent, and rem change the output?

The tool keeps radii in pixels and converts the output when Unit changes. Percentage conversion divides a horizontal radius by the box width and a vertical radius by the box height, then multiplies by 100. Rem conversion divides by the fixed base of 16. Output conversions round to at most two decimal places, so copied percentage values can approximate the original pixel geometry.

Unit	Rounded preset on a 200 × 100px box	Calculation
px	16px	The preset radius is 16px on both axes.
%	8% / 16%	16 / 200 × 100 horizontally; 16 / 100 × 100 vertically.
rem	1rem	16 / 16 on both axes.

This explains why percentage output can contain a slash even with the split control off: the tool expresses the same circular pixel corner relative to two different dimensions. Under the CSS percentage rules, a single 50% radius produces a circle on a square and an ellipse on a rectangle. Use the Pill preset when you want a capsule based on half the shorter side instead. For a different root font size, check the rem conversion with PX to REM Converter.

What happens when you resize the preview box?

Width (px) and Height (px) accept dimensions from 20 to 600 pixels and round them to whole pixels. Changing the box size keeps stored pixel radii unless they need fitting. When a pair of stored horizontal radii exceeds the width, the tool scales that pair to fit and rounds each down. It checks vertical pairs against the height in the same way. This pair-by-pair adjustment is the generator's editing behavior; CSS has its own overlap rules when rendering a declaration.

Presets are starting points rather than persistent shape constraints. Pill calculates its radius when you click it; after changing the dimensions, click Pill again to recalculate half the new smaller side. Copy link records the current radii, dimensions, unit, linking and split options, box color, output format, and overflow choice in the URL hash. Opening that link restores the encoded configuration.

How can you use rounded corners in a design system?

Use a consistent radius for related components, then vary it deliberately for different roles. Rounded provides a 16px starting point for a panel, Tab rounds the top of a section, and Pill follows the current box dimensions for capsule geometry. Compare those shapes at the sizes your components actually use instead of treating the preset name as a guarantee for every future layout.

The output contains radius styling and optional overflow clipping; it does not include width, height, or the preview's Box color. Set those separately in your stylesheet or component. The Tailwind tab creates arbitrary-value classes, while React style returns an object with a string-valued borderRadius property. Neither output creates a reusable design token automatically. Use CSS Box Shadow Generator to develop the surrounding panel treatment.

When should you use border-radius instead of clip-path?

Use border-radius when your shape comes from rounding the four corners of a box, including pills and elliptical corners. For polygonal outlines or a custom clipping boundary, explore CSS Clip Path Generator. Border-radius alone does not produce inward cutouts. The choice depends on the geometry you need, rather than a general animation-performance promise.

If an image inside the box still reaches into the corners, enable Add overflow: hidden (clips child content to the rounded corners). The generator then includes the appropriate clipping option in CSS, Tailwind, and React output. Check the result in its final layout because overflow clipping also applies to other child content. The tool generates static styles; it does not generate animation keyframes.