---
title: Borders & Radius
description: Fluid border-radius and border/outline widths with the rounded, border, outline, and outline-offset utilities.
sidebar:
  label: Borders & Radius
  order: 6
---

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)

```html
<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.

<Demo hint="Drag the corner to resize this container ->" resize>
  <div class="f6y-demo-track">
    <div class="f6y-demo-box f6y-rounded-sm/2xl f6y-axis-cqi f6y-lower-[16rem] f6y-upper-[48rem]">
      f6y-rounded-sm/2xl
    </div>
  </div>
</Demo>

```html
<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`.

```html
<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.

:::note
The `lineWidth` kind is unique: bare numbers represent pixel counts (for example, `border-2` -> `2px`), not spacing-scale multiples.
This matches Tailwind's own border/outline conventions.
:::

```html
<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.

<Demo hint="Drag the corner to resize this container ->" resize>
  <div class="f6y-demo-track">
    <div class="f6y-demo-box f6y-border-1/8 f6y-axis-cqi f6y-lower-[16rem] f6y-upper-[48rem]" style="border-style: solid;">
      f6y-border-1/8
    </div>
  </div>
</Demo>

```html
<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](/concepts/configuration).
Adjust the scale within a subtree by setting `f6y-lower-*` and `f6y-upper-*` on a container.