{{ summaryTitle }}
{{ summaryValue }}

{{ summaryLine }}

Shape{{ resultsReady ? shapeLabel : '—' }} Fit{{ resultsReady ? fitLabel : '—' }} Format{{ resultsReady ? computation.values.format_label : '—' }}
Use px for fixed UI corners and % for shape-sensitive masks.
Elliptical corners expose separate horizontal and vertical axes.
H {{ unit }}
{{ unit }}
Example: .rounded-shape.
Example: component-radius.
{{ optimize_shorthand ? 'Enabled' : 'Disabled' }}
From 80px to 520px.
px
From 80px to 360px.
px
{{ computation.values.code_text }}

Preparing the radius profile…

{{ chartExportStatus }}

The chart renderer is unavailable. The values remain available in the corner ledger.

CornerHorizontalVerticalUsed scaleLonghandCopy
{{ row.label }}{{ row.horizontalDisplay }}{{ row.verticalDisplay }}{{ row.scaleDisplay }}{{ row.longhand }}

{{ ledgerExportStatus }}

CSS Gradient Generator Build CSS gradients using linear, radial or conic geometry with exact color stops and optional modern interpolation spaces for copy-ready stylesheets.
CSS Box Shadow Generator Compose ordered CSS box-shadow layers and compare blur and spread in a live preview before copying a stylesheet rule or reusable design token.
CSS Grid Generator Build responsive or fixed CSS Grid rules with auto-fit and auto-fill options, fit estimates, plus narrow-container safeguards and starter HTML.
SVG Placeholder Generator Create an SVG placeholder with exact pixel dimensions and readable labels, then copy accessible markup or CSS with contrast warnings for layout work.

A rounded CSS corner is a quarter ellipse fitted to the border box. One radius gives the ellipse the same horizontal and vertical size, producing a circular corner. Two radii let the curve stretch independently across the box and down its side. That distinction matters for image masks, asymmetric panels, pills, and components whose width and height change independently.

A rounded rectangle showing clockwise corner order and separate horizontal and vertical radii.

The border-radius shorthand lists corners clockwise: top-left, top-right, bottom-right, then bottom-left. A slash separates two clockwise sequences. Values before the slash are horizontal radii; values after it are vertical radii. With no slash, the same sequence applies to both axes.

UnitWhat changes the curveUseful fit
pxThe written length stays fixed until overlap scaling is needed.Stable interface corners and measured components.
rem or emRoot or element font size changes the resolved length.Radius systems tied to typography.
%Horizontal values use box width; vertical values use box height.Responsive ellipses, capsules, and image masks.
vw or vhThe viewport changes the resolved length.Deliberately viewport-scaled artwork.

Browsers do not let adjacent corner curves overlap. If the two radii touching any edge exceed that edge, every used radius is reduced by the same proportion. A very large number can therefore make a pill without producing a curve larger than the box, but the rendered radius may be much smaller than the written value.

The CSS text alone cannot settle appearance. Border-box dimensions, percentage resolution, font or viewport units, borders, clipping, and surrounding layout all affect the final curve. Compare shapes at the real component sizes before treating a radius as a reusable design token.

How to Use This Tool:

Set the geometric unit and radius type first; they determine how each corner value should be read.

  1. Choose a CSS unit and select Circular corners or Elliptical corners. Elliptical mode exposes separate horizontal and vertical values.
  2. Enter the four corners in clockwise order. Every radius must be a finite number from 0 to 999.
  3. Select the Code format. A selector is required for a full rule, custom property, layer, or SCSS output; declaration and Tailwind forms do not require one.
  4. Keep Optimize repeated shorthand values on for compact CSS, or turn it off when an explicit four-corner handoff is easier to audit.
  5. Set Preview width and Preview height to the target box when using pixels or percentages. Read the fit label and corner ledger before copying the generated code.

Interpreting Results:

Read the shorthand from left to right in clockwise corner order. A slash means the two axes differ. The corner ledger expands each pair into its physical longhand, which is the quickest way to catch a swapped bottom corner or a mistaken horizontal and vertical value.

Fits means no overlap reduction is needed for the current pixel or percentage preview. Scaled reports the shared proportion the browser would use. Contextual means the selected rem, em, vw, or vh values cannot be resolved from preview dimensions alone; test the code in its real CSS context.

Technical Details:

Each corner is stored as a horizontal and vertical radius. Circular mode copies the horizontal value onto the vertical axis. Elliptical mode preserves both values. Decimal output keeps up to four places and removes trailing zeros.

Transformation Core:

Input relationshipEmitted sequence
All four values matchone value
Top-left equals bottom-right and top-right equals bottom-lefttwo values
Top-right equals bottom-leftthree values
No reusable relationshipfour values
Horizontal and vertical sequences differhorizontal sequence, slash, vertical sequence

Formula Core:

The fit scale is the smallest edge-to-adjacent-radii ratio, capped at 1. The same factor applies to every used radius so the relative shape is preserved.

f=min(1, WrTLx+rTRx, HrTRy+rBRy, WrBLx+rBRx, HrTLy+rBLy)

W and H are the border-box width and height. The subscripts identify top-left, top-right, bottom-right, and bottom-left radii on the horizontal (x) or vertical (y) axis. When f is below 1, each used radius equals its specified radius multiplied by f.

Fit is computed directly for pixel values and for percentages resolved against the preview box. Other supported units are marked contextual because their pixel sizes depend on font or viewport information that the preview dimensions do not supply.

Worked Examples:

Two repeating elliptical pairs

Horizontal radii of 24, 48, 24, and 48 pixels compress to 24px 48px. Vertical radii of 40, 20, 40, and 20 pixels compress to 40px 20px. The result is border-radius: 24px 48px / 40px 20px;.

Large circular corners in a short box

Four 60px radii on a 120px by 80px box fit across the width but total 120px along each 80px side. The scale is 80 ÷ 120 = 0.6667, so the browser uses 40px radii. The declaration stays at 60px; only the used geometry is reduced.

References: