Radius

Classes

Fully rounded corners use the fixed pill utility, not a radius token: it sets only border-radius: calc(infinity * 1px).

Values

The eight preset radii are rem lengths. Pixel equivalents assume a 16px root font size. A radius shapes corners; it does not set the box dimensions.

Rounding and clipping are separate

r-4xl rounds the parent’s background and border. It does not give a child the same radius or automatically clip that child’s painting. Add overflow-hidden when the parent should clip its contents to the rounded edge.

Both parents use r-4xl and the same content. Only the right parent adds overflow-hidden. Blue identifies the child surface; the dashed contour marks the parent’s rounded edge.

Text description

1. Both parent boxes use r-4xl, whose preset value is 2rem. They contain identical child and parent-content regions, with dimensions following the same content.
2. The left parent keeps the default visible overflow. Its own background is rounded, but the blue child paints a rectangle at the top.
3. The right parent adds overflow-hidden. The same child rectangle is clipped to the parent’s rounded edge; the child does not inherit a radius.
4. The dashed contour is an inspection annotation, not a border emitted by r-4xl. The color only identifies the same child in both examples.

The physical families such as rtl- always address the top-left corner. Logical families such as rss- follow the block-start and inline-start sides, so their physical corner depends on writing mode and direction. Every mapping is listed above.

Oversized radii are reduced by the browser when adjacent curves would overlap. This is why pill produces a capsule on a wide box and a circle on a square. It does not make an element square.

For a square corner use the direct-value function r(0) or its single-corner counterpart, such as rtl(0). The preset has no --radius-none token. Negative token forms such as -r-md are rejected.

See native corner clipping and direct values.

Usage

Step the radius down from a sheet to the thumbnail inside it.

<div class="… r-lg">  <div class="… r-md">FN</div>  <div>    <p>Field notes</p>    <p>Every Friday</p>  </div>  <span class="… pill">Weekly</span></div>

@layer theme {  :root,  :host {    --radius-md: .375rem;    --radius-lg: .5rem  }}@layer utilities {  .r-lg {    border-radius: var(--radius-lg)  }  .r-md {    border-radius: var(--radius-md)  }  .pill {    border-radius: calc(infinity * 1px)  }}

Customize

Change a preset value or add a token: --radius-card creates r-card and each single-corner class.

@theme {  --radius-md: .5rem;  --radius-card: 1.25rem;}

@layer theme {  :root,  :host {    --radius-card: 1.25rem  }}@layer utilities {  .r-card {    border-radius: var(--radius-card)  }}

See theme directives and Color.