Borders & Radius

Fluid border-radius and border/outline widths with the rounded, border, outline, and outline-offset utilities.

The Borders & Radius group provides fluid control over corner rounding and stroke widths. Every utility ships in linear, exp-, and log- variants and works with all Tailwind variants (md:, hover:, dark:, etc.).

rounded - border-radius

Maps to border-radius using the radius kind, which accepts --radius-* theme keys or arbitrary values. Bare f6y-rounded defaults to var(--radius-md) (0.375rem).

The base rounded sets all four corners. Add edge or corner suffixes to target specific corners:

• Edges (both corners on that edge): t (top), r (right), b (bottom), l (left)
• Logical edges (independent of text direction): s (start, both start corners), e (end, both end corners)
• Physical corners: tl (top-left), tr (top-right), br (bottom-right), bl (bottom-left)
• Logical corners: ss (start-start), se (start-end), es (end-start), ee (end-end)

<div class="f6y-rounded-sm/2xl">All corners ramp from 0.125rem to 0.75rem.</div>
<div class="f6y-rounded-t-sm/2xl">Only top corners ramp.</div>
<div class="f6y-rounded-tl-sm/2xl">Only top-left corner ramps.</div>
<div class="f6y-rounded-s-sm/2xl">Start-side corners ramp (logical, respects text direction).</div>
<div class="f6y-rounded">Bare: uses 0.375rem as min, 0.75rem as max.</div>

See the demo below: a box’s corner radius grows as its container widens.

<div class="@container">
  <div class="f6y-rounded-sm/2xl f6y-axis-cqi f6y-lower-[16rem] f6y-upper-[48rem]">
    Corner radius ramps from 0.125rem to 0.75rem.
  </div>
</div>

Border width - border, border-x, border-y, and corners

Maps to border-width variants using the lineWidth kind. Accepts px counts (like Tailwind’s border-2 -> 2px) or arbitrary values.

• border: all sides
• border-x: left and right
• border-y: top and bottom
• border-s: inline-start
• border-e: inline-end
• border-t, border-r, border-b, border-l: individual physical sides

Bare f6y-border defaults to 1px.

<div class="f6y-border-1/8">Border width ramps from 1px to 8px.</div>
<div class="f6y-border-y-2/4">Top and bottom borders ramp from 2px to 4px.</div>
<div class="f6y-border-[1px]/[4px]">Arbitrary values work too.</div>
<div class="f6y-border">Bare: 1px min, 2px max.</div>

Outline width - outline and offset

Maps to outline-width and outline-offset using the lineWidth kind for widths, spacing kind for offset. Widths accept px counts or arbitrary values. Offset accepts spacing-scale numbers or arbitrary values.

<div class="f6y-outline-1/4">Outline width ramps from 1px to 4px.</div>
<div class="f6y-outline-offset-2/8">Outline offset ramps from 0.5rem to 2rem.</div>
<div class="f6y-outline">Bare outline: 1px min, 2px max.</div>
<div class="f6y-outline-offset">Bare offset: 0.5rem min, 1rem max.</div>

See the demo below: a box’s border grows as its container widens.

<div class="@container">
  <div class="f6y-border-1/8 f6y-axis-cqi f6y-lower-[16rem] f6y-upper-[48rem]">
    Border width ramps from 1px to 8px.
  </div>
</div>

Each border and radius utility inherits its axis and bounds from parent configuration utilities. Adjust the scale within a subtree by setting f6y-lower-* and f6y-upper-* on a container.