CSS Border Radius Generator

CSS Border Radius

Unit:

Choose the CSS unit appended to every radius value.

Radius type:

Use circular corners for one axis, or elliptical corners for slash syntax.

{{ corner.label }}:

Set this corner's horizontal radius and optional vertical radius.

H {{ unit }}

V {{ unit }}

Presets:

Load a common shape, then adjust any corner value.

Shape shortcuts

{{ message }}

Selector:

Leave the default selector or enter your component selector.

Code format:

Selector rule is ready to paste; declaration and custom property formats fit existing stylesheets.

Custom property name:

Example: component-radius exports --component-radius.

Optimize shorthand

Compress repeated values to valid one-, two-, or three-value shorthand when possible.

Preview size:

Set the preview box size in pixels.

W px

H px

{{ cssOutput }}

Corner	Horizontal	Vertical	Longhand	Detail	Copy
{{ row.corner }}	{{ row.horizontal }}	{{ row.vertical }}	{{ row.longhand }}	{{ row.detail }}

Side	Axis	Specified sum	Available span	Browser action	Detail	Copy
{{ row.side }}	{{ row.axis }}	{{ row.specifiedSum }}	{{ row.availableSpan }}	{{ row.browserAction }}	{{ row.detail }}

Check	Status	Detail	Copy
{{ row.check }}	{{ row.status }}	{{ row.detail }}

Export to PDF Fullscreen

Embed:

Customize

Include current inputs

Size

Advanced

Width

Height

Aspect ratio

Max height

Collapsible embed

Allow fullscreen

Referrer policy

Sandbox tokens

CSS border radius controls how the corners of a box curve along the outer border edge. A small radius softens a card, a very large radius can make a button look like a pill, and different corner values can create organic shapes without drawing a separate image.

The shorthand is compact, but it carries more detail than a casual glance suggests. The first set of values moves clockwise from top-left to top-right to bottom-right to bottom-left. A slash adds a second set of vertical radii, so the corner can become elliptical instead of circular.

Border radius values move clockwise and slash syntax separates horizontal and vertical radii

Percentage radii are especially easy to misread. A horizontal percentage uses the box width, while a vertical percentage uses the box height. The same 50% value can therefore curve differently on a square card, a wide banner, and a tall badge.

A valid radius string is only part of the design check. If adjacent corner radii are too large for the box, browsers reduce the used radius values so the curves do not overlap. That makes pill corners possible, but it also means the typed number and the rendered curve are not always visually proportional.

Technical Details:

The border-radius shorthand sets the four physical corner radius properties. Each corner can have one radius, which makes a circular quarter curve, or two radii, which define the horizontal and vertical axes of an ellipse.

Without a slash, the same value sequence is used for both axes. With a slash, values before the slash set horizontal radii and values after the slash set vertical radii. Omitted values follow normal CSS shorthand repetition, so two values mirror across opposite corners and three values repeat the second value for bottom-left.

Shorthand Core:

CSS border radius shorthand expansion rules
Written Form	Corner Order	Meaning
`24px`	All four corners	One circular radius applies to every corner.
`24px 48px`	Top-left and bottom-right, then top-right and bottom-left	Opposite corners share values.
`24px 48px 32px`	Top-left, top-right and bottom-left, bottom-right	The second value repeats for bottom-left.
`24px 48px 32px 12px`	Top-left, top-right, bottom-right, bottom-left	Each corner receives its own horizontal and vertical radius when no slash is present.
`68% 28% 72% 34% / 26% 72% 32% 64%`	Same clockwise order on both axes	The first sequence sets horizontal radii and the second sequence sets vertical radii.

Browsers prevent adjacent rounded corners from overlapping. For each edge, the two touching radii are added and compared with that edge length. If any edge is too short, every used radius is reduced by the smallest scale factor.

f = min_{edge} (\frac{L_{edge}}{S_{edge}}), used radius = specified radius \times min(1, f)

Here, L is the box width for top and bottom edges or box height for left and right edges. S is the sum of the two adjacent radii on that edge. If f is below 1, the rendered corner is smaller than the specified corner; if f is 1 or higher, the radii fit as written.

Lengths such as px can be compared with a preview size directly. Percentages can also be converted when the box width and height are known. Units tied to font size or viewport size need the final layout context before the exact rendered curve can be judged.

Everyday Use & Decision Guide:

For ordinary interface work, start with Unit set to px and Radius type set to Circular corners. The Card preset gives a balanced first pass, while Pill is useful when the element should stay fully rounded across different widths.

Switch to Elliptical corners when each corner needs different horizontal and vertical curves. The Blob preset is a good rough sketch for image masks, avatar treatments, stickers, and decorative panels, but the preview shape should be checked against the actual element size before copying CSS.

Use Optimize shorthand when you want the shortest valid value string.
Turn optimization off when a design handoff should show all four corners explicitly.
Choose Selector rule when the generated CSS should include a selector wrapper.
Choose Declaration only when pasting into an existing rule.
Choose CSS custom property when a reusable radius token fits your component system.

The Corner Preview is a visual check, not a replacement for testing in the real component. If Box Fit Audit reports a scaled edge, the CSS is still valid, but the browser is reducing the used radii for the current preview size.

Before copying, compare the summary shorthand with Corner Ledger and Syntax Audit. Stop if the selector wrapper shows Review, because braces or semicolons in the selector can produce a rule wrapper that needs manual cleanup.

Step-by-Step Guide:

Choose Unit. Use px for fixed interface corners, % for proportional shapes, or rem and em when the radius should follow typography.
Choose Radius type. In Circular corners, each corner uses one effective radius; in Elliptical corners, each corner has separate H and V values.
Enter the four corner values in clockwise order, or load Card, Pill, Blob, or Reset from Presets.
Open Advanced, set Selector, then choose Code format. If CSS custom property is selected, review the normalized custom property name.
Adjust Preview size to match the target component as closely as possible, then open Box Fit Audit to see whether any edge is scaled or contextual.
Review Syntax Audit. Negative query values are clamped to 0, unknown units fall back to px, and selector punctuation should be corrected before publishing.
Copy from Border Radius CSS after the shorthand, longhand rows, and fit status match the intended shape.

Interpreting Results:

The headline shorthand is the main CSS value. If it includes a slash, read the left sequence as horizontal radii and the right sequence as vertical radii. If no slash appears, each corner uses the same horizontal and vertical value.

Corner Ledger is the audit view for individual corners. It shows the longhand property for top-left, top-right, bottom-right, and bottom-left, which is the quickest way to catch a corner order mistake before copying the shorthand.

Box Fit Audit reports how the current preview box treats adjacent radii. Fits means the preview dimensions do not force browser reduction. Scale or Scaled means the rendered curve is smaller than the specified value for that preview size. Contextual means the chosen unit needs font or viewport context before a pixel comparison is possible.

A polished preview does not mean the radius will look identical everywhere. Keep the unit, output mode, preview width, and preview height consistent when comparing several designs, then test the copied CSS in the component that will actually use it.

Worked Examples:

A product card with all corners set to 16px, Unit set to px, and Radius type set to Circular corners should produce border-radius: 16px;. Syntax Audit should show optimized shorthand and omitted slash syntax.

A pill button can use the Pill preset with a preview around 320px x 112px. The shorthand remains valid even when Box Fit Audit reports scaling, because browsers reduce the used radii to fit the button height and preserve the capsule shape.

An organic image mask can use Unit set to %, Radius type set to Elliptical corners, and values such as 68 28 72 34 for H and 26 72 32 64 for V. The output should include a slash, and Corner Ledger should show longhand rows with paired horizontal and vertical values.

A selector such as .card { border-radius: 1rem; } will trigger a wrapper warning because it contains CSS punctuation. Change Selector to .card or switch Code format to Declaration only, then confirm Selector wrapper no longer needs review.

FAQ:

Why did the output remove some repeated values?

Optimize shorthand compresses repeated corner values to valid one-, two-, or three-value CSS shorthand. Turn it off when you want the output to show all four corners.

When should I use slash syntax?

Use slash syntax when a corner needs different horizontal and vertical radii. In Elliptical corners, the output includes the slash when the vertical values differ from the horizontal values or expanded output is requested.

Why does the fit audit say contextual?

rem, em, vw, and vh depend on font or viewport context, so the preview cannot reduce them to a reliable pixel sum inside the audit table.

Can very large radius values be valid?

Yes. A value such as 999px is valid after negative values are ruled out, but the browser may reduce the used radius when adjacent curves exceed the box size.

Do radius values have to be sent to a server?

No server request is needed to build the CSS. The corner values, preview, audits, copy actions, and downloads are generated in the browser page.

Glossary:

Border radius: The CSS radius that rounds the outer border edge of a box.
Shorthand: A compact CSS declaration that sets multiple corner radii at once.
Longhand: An individual corner property such as border-top-left-radius.
Slash syntax: The CSS form that separates horizontal radii from vertical radii for elliptical corners.
Used radius: The radius a browser actually renders after any required overlap reduction.
Custom property: A reusable CSS variable name that can store the generated radius value.

References:

border-radius CSS property, MDN Web Docs, 2025-12-05.
CSS Backgrounds and Borders Module Level 3, Rounded Corners, W3C.