CSS Border Radius Generator

Current shorthand

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

Code format:

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

{{ message }}

Selector:

Leave the default selector or enter your component selector.

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 context:

Choose the visual surface used by the preview result.

Preview fill:

Pick a preview color close to the component that will receive the radius.

Preview size:

Set the preview box size in pixels.

W px

H px

{{ cssOutput }}

{{ tailwindOutput }}

{{ previewKindLabel }} · {{ radiusResult.previewLabel }}

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 }}

Embed:

Customize

Include current inputs

Size

Advanced

Width

Height

Aspect ratio

Max height

Collapsible embed

Allow fullscreen

Referrer policy

Sandbox tokens

Rounded corners are written as small CSS values, but browsers resolve them as geometry around a real box. The same 16px value can lightly soften a card, while 999px can become a pill because the browser limits the used curve to the element's height. A percentage radius changes again when the box width or height changes.

Most UI work uses circular corners, where each corner has one effective radius. Elliptical corners add a separate vertical radius, so the horizontal and vertical arcs can differ. That second axis is useful for organic masks, asymmetric panels, and image tiles that would be awkward to redraw as separate graphics.

The shorthand has two practical traps. Corner values move clockwise from top-left to top-right to bottom-right to bottom-left, not by visual rows. A slash divides horizontal radii from vertical radii, so the sequence before the slash is only half of an elliptical corner definition.

Border radius shorthand uses clockwise corner order and slash syntax for horizontal and vertical radii

Unit choice matters because a radius is not always an absolute length. Pixel values are easy to compare across fixed components. rem and em values follow typography. Viewport units follow the visible browser area. Percentages are the most shape-sensitive because horizontal percentages use the box width while vertical percentages use the box height.

Common border radius uses and cautions
Use	Common radius choice	What to verify
Cards and panels	Small fixed length such as `8px` to `24px`	The curve should not clip shadows, borders, or dense content near the corner.
Pill buttons	Very large length such as `999px`	The element height controls the rendered capsule more than the written number does.
Image masks and blobs	Percentage values with slash syntax	Changing the aspect ratio changes the visible curve, even when the CSS text stays the same.

Browsers also protect the box from impossible curves. If the radii touching an edge add up to more than the edge can hold, the browser reduces the used radii proportionally. That behavior makes large pill values practical, but it can surprise anyone expecting the typed number to equal the exact rendered curve.

A good radius value therefore has two jobs. It must be syntactically valid CSS, and it must still look right in the actual component size. Shorthand, units, preview dimensions, and adjacent-corner fit all affect that second check.

How to Use This Tool:

Start with the shape you want to test, then use the result tabs to confirm that the CSS, preview, and audit rows agree.

Choose Unit. Use px for fixed interface corners, % for proportional masks, rem or em for type-relative systems, and vw or vh only when viewport scaling is intended.
Set Radius type. Circular corners uses one effective value per corner. Elliptical corners exposes separate H and V controls so the output can include slash syntax.
Enter the four corners in clockwise order, or load Card, Pill, Blob, or Reset from Presets. The summary should update to show the current shorthand, slash state, unit, and output format.
Choose Code format. Use Selector rule for a complete CSS block, Declaration only for pasting inside an existing rule, CSS custom property for a reusable token, CSS @layer utility for a utility block, or SCSS variable for Sass code.
Open Advanced when the selector, custom property name, shorthand optimization, preview context, preview fill, or preview size needs to match a real component. The preview dimensions affect the visual and fit audit, not the generated radius declaration.
Check Syntax Audit and Box Fit Audit before copying. Negative values are clamped to 0, unknown units fall back to px, and selector braces or semicolons should be removed before publishing a wrapped rule.
Copy from Border Radius CSS or Tailwind Utility after Corner Ledger shows the intended longhand values and Box Fit Audit does not reveal unwanted scaling.

Interpreting Results:

The headline shorthand is the value to read first. If the string contains no slash, each corner uses the same horizontal and vertical radius. If the string contains a slash, read the left sequence as horizontal radii and the right sequence as vertical radii.

Corner Ledger is the safest place to catch ordering mistakes. The rows expand the shorthand into border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius, so a swapped corner is easier to spot than it is in the compact shorthand.

Box Fit Audit explains the preview geometry. Fits means the adjacent radii fit the current preview width and height. Scale or Scaled means the browser would reduce the used radii for that preview size. Contextual means the selected unit depends on font size or viewport size, so the final component must be checked in its real layout.

Syntax Audit focuses on code-readiness. It reports shorthand compression, slash inclusion, clockwise corner order, unit policy, selector wrapper status, code format, Tailwind utility readiness, browser fit, and preview size.

A valid CSS string is not a guarantee that the curve will look identical in every component. Keep Unit, Preview size, and Radius type consistent when comparing options, then test the copied CSS where the component will actually render.

Technical Details:

The border-radius shorthand sets the physical corner radius properties of a CSS box. Each corner can be represented by one radius, producing a quarter-circle curve, or by a pair of radii, producing a quarter-ellipse. The first radius in a pair is horizontal and the second is vertical.

Shorthand repetition follows the same clockwise pattern used by many CSS box properties. One value applies everywhere, two values apply to opposite corners, three values reuse the second value for the bottom-left corner, and four values set each corner separately. Slash syntax repeats the same rule on each axis.

Shorthand Core:

CSS border radius shorthand expansion rules
Written form	Expanded corner order	Resulting meaning
`16px`	All four corners	One circular radius applies to every corner.
`16px 32px`	Top-left and bottom-right, then top-right and bottom-left	Opposite corners share values.
`16px 32px 8px`	Top-left, top-right and bottom-left, bottom-right	The second value repeats for bottom-left.
`16px 32px 8px 24px`	Top-left, top-right, bottom-right, bottom-left	Each corner receives its own circular radius.
`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.

When shorthand optimization is enabled, repeated sequences are shortened independently. If the horizontal and vertical sequences match in elliptical mode, slash syntax can be omitted because the circular shorthand already describes the same used curve. Turning optimization off keeps the expanded corner sequence visible for design handoff.

Formula Core:

For a rendered box, adjacent rounded corners cannot overlap. The browser compares each edge length with the sum of the two radii that touch that edge, then uses the smallest ratio as a global reduction factor.

f = \min (\frac{L_{top}}{r_{TLx} + r_{TRx}}, \frac{L_{right}}{r_{TRy} + r_{BRy}}, \frac{L_{bottom}}{r_{BLx} + r_{BRx}}, \frac{L_{left}}{r_{TLy} + r_{BLy}})

used radius = specified radius \times \min (1, f)

Here, L is the relevant edge length. Top and bottom use the box width, while left and right use the box height. The x radii are horizontal, and the y radii are vertical. If f is below 1, every used radius is multiplied by f; if f is 1 or higher, the specified values fit as written.

A pill preset with 999px corners on a 320px x 112px preview illustrates the reduction. The right edge has 999px + 999px of vertical radius against 112px of available height, so the limiting ratio is about 0.056. The audit rounds that to Scale 6%, which is why the button still renders as a capsule instead of trying to draw impossible overlapping arcs.

Validation and Unit Boundaries:

Border radius validation and unit behavior
Area	Rule	Practical effect
Radius values	Negative values are invalid in CSS and are clamped to `0`; very large values are capped at `999` for output.	Unexpected negative query values do not produce invalid declarations.
Percentages	Horizontal radii resolve against width, and vertical radii resolve against height.	A square preview and a wide preview can render different curves from the same percentage string.
`rem`, `em`, `vw`, `vh`	The exact pixel size depends on font or viewport context.	`Box Fit Audit` reports `Contextual` rather than pretending the preview can know the final value.
Selector wrapper	Selector output expects a selector, not a whole CSS declaration block.	Braces or semicolons trigger `Review` so the wrapper can be corrected before copying.
Tailwind utility	The arbitrary value uses `rounded-[...]`, with spaces converted to underscores.	The same radius can be pasted into a Tailwind class when arbitrary values are supported by the project.

The generated CSS is deterministic for the selected values. The visual result can still differ across components because dimensions, font size, viewport size, borders, overflow, and framework processing all affect how the copied radius is finally applied.

Worked Examples:

A card with Unit set to px, Radius type set to Circular corners, and all four corners set to 16 should show 16px in the summary. Border Radius CSS should include border-radius: 16px;, Corner Ledger should show matching longhand rows, and Box Fit Audit should report Fits for a normal card preview.

A pill button can use the Pill preset. With the preset preview at 320px x 112px, Border Radius CSS still uses a very large radius, while Box Fit Audit reports a scale action because the browser reduces the used radii to the button height. That status is expected for resilient capsule shapes.

An image mask can start from the Blob preset. The summary should include a slash, Corner Ledger should show paired horizontal and vertical values, and Tailwind Utility should produce a rounded-[...] class with underscores where CSS shorthand uses spaces. If Box Fit Audit reports scaling for the preview size, test the same CSS on the final image aspect ratio before committing it.

A selector such as .card { border-radius: 1rem; } causes Syntax Audit to mark Selector wrapper as Review. Change Selector to .card or switch Code format to Declaration only, then confirm the wrapper row no longer needs review.

FAQ:

Why did repeated values disappear from the shorthand?

Optimize shorthand compresses repeated corner sequences to valid one-, two-, or three-value CSS shorthand. Turn it off when a design handoff should show all four corners explicitly.

When should I use slash syntax?

Use slash syntax when horizontal and vertical corner radii need to differ. In Elliptical corners, the output includes the slash when the axes differ or when expanded output is requested.

Why does the fit audit say contextual?

rem, em, vw, and vh need font or viewport context before they can be compared as pixels, so Box Fit Audit asks you to inspect the copied CSS in the final layout.

Can a huge radius like 999px be valid?

Yes. Large non-negative radii are valid, and browsers reduce the used value when adjacent curves would overlap. That is why 999px is common for pill buttons.

Why is my selector marked for review?

Selector wrapper is marked Review when the selector contains braces or semicolons. Enter only the selector, such as .card, or use Declaration only if you already have a rule block open.

Are radius values sent to a server?

No server request is needed to generate the CSS. The current radius values, preview, audits, copy actions, and downloads are handled 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 several corner radius properties at once.
Longhand: An individual corner property such as border-top-left-radius.
Elliptical corner: A rounded corner with separate horizontal and vertical radii.
Slash syntax: The CSS form that separates horizontal radii from vertical radii.
Used radius: The radius the browser actually renders after any overlap reduction.
Arbitrary value: A Tailwind class value written in square brackets, such as rounded-[16px].

References:

CSS Backgrounds and Borders Module Level 3, W3C Candidate Recommendation Draft, 11 March 2024.
border-radius CSS property, MDN Web Docs.
border-radius, Tailwind CSS.