zfb
GitHub repository

Type to search...

to open search from anywhere

Border radius

Set all corners, edge corners, or a single corner with configured radius values.

Round all corners, a physical side’s pair of corners, or one corner.

Quick reference

Example classExpected declarations
rounded-cardborder-top-left-radius: var(--zw-radius-card); border-top-right-radius: var(--zw-radius-card); border-bottom-right-radius: var(--zw-radius-card); border-bottom-left-radius: var(--zw-radius-card);
rounded-b-cardborder-bottom-right-radius: var(--zw-radius-card); border-bottom-left-radius: var(--zw-radius-card);
rounded-l-cardborder-top-left-radius: var(--zw-radius-card); border-bottom-left-radius: var(--zw-radius-card);
rounded-r-cardborder-top-right-radius: var(--zw-radius-card); border-bottom-right-radius: var(--zw-radius-card);
rounded-t-cardborder-top-left-radius: var(--zw-radius-card); border-top-right-radius: var(--zw-radius-card);
rounded-bl-cardborder-bottom-left-radius: var(--zw-radius-card);
rounded-br-cardborder-bottom-right-radius: var(--zw-radius-card);
rounded-tl-cardborder-top-left-radius: var(--zw-radius-card);
rounded-tr-cardborder-top-right-radius: var(--zw-radius-card);
Example setup

The shared preview base explicitly sets spec 1, reset: "none", strict mode, tokens.spacingUnit: "0.25rem", and no breakpoints. Each named value is configured in that example; there is no inherited palette or theme. wind-demo classes are authored context styles; their CSS is shown separately from the utility declarations.

Examples in use

Round sides and individual corners

Every card uses the same explicitly configured card radius; only the selected side or corner changes.

Round sides and individual corners
HTML
<div class="wind-demo-radius-grid"><div class="wind-demo-radius-card rounded-card bg-panel text-ink p-2">all</div><div class="wind-demo-radius-card rounded-t-card bg-panel text-ink p-2">top</div><div class="wind-demo-radius-card rounded-r-card bg-panel text-ink p-2">right</div><div class="wind-demo-radius-card rounded-b-card bg-panel text-ink p-2">bottom</div><div class="wind-demo-radius-card rounded-l-card bg-panel text-ink p-2">left</div><div class="wind-demo-radius-card rounded-tl-card bg-panel text-ink p-2">top-left</div><div class="wind-demo-radius-card rounded-tr-card bg-panel text-ink p-2">top-right</div><div class="wind-demo-radius-card rounded-br-card bg-panel text-ink p-2">bottom-right</div><div class="wind-demo-radius-card rounded-bl-card bg-panel text-ink p-2">bottom-left</div></div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-color-accent: #075985;
    --zw-color-alert: #8b1e3f;
    --zw-color-focus: #0f766e;
    --zw-color-ink: #16324f;
    --zw-color-panel: #edf4f8;
    --zw-color-white: #fff;
    --zw-radius-card: .75rem;
    --zw-radius-pill: 9999px;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-radius-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(5rem, 1fr));
  gap: .6rem;
  max-width: 27rem;
}

.wind-demo-radius-card {
  display: grid;
  place-items: center;
  min-height: 3.2rem;
  text-align: center;
  font: 12px / 1.25 system-ui, sans-serif;
}
.p-2 {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.text-ink {
  color: var(--zw-color-ink);
}
.bg-panel {
  background-color: var(--zw-color-panel);
}
.rounded-card {
  border-top-left-radius: var(--zw-radius-card);
  border-top-right-radius: var(--zw-radius-card);
  border-bottom-right-radius: var(--zw-radius-card);
  border-bottom-left-radius: var(--zw-radius-card);
}
.rounded-b-card {
  border-bottom-right-radius: var(--zw-radius-card);
  border-bottom-left-radius: var(--zw-radius-card);
}
.rounded-l-card {
  border-top-left-radius: var(--zw-radius-card);
  border-bottom-left-radius: var(--zw-radius-card);
}
.rounded-r-card {
  border-top-right-radius: var(--zw-radius-card);
  border-bottom-right-radius: var(--zw-radius-card);
}
.rounded-t-card {
  border-top-left-radius: var(--zw-radius-card);
  border-top-right-radius: var(--zw-radius-card);
}
.rounded-bl-card {
  border-bottom-left-radius: var(--zw-radius-card);
}
.rounded-br-card {
  border-bottom-right-radius: var(--zw-radius-card);
}
.rounded-tl-card {
  border-top-left-radius: var(--zw-radius-card);
}
.rounded-tr-card {
  border-top-right-radius: var(--zw-radius-card);
}
Configuration for this example
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "colors": {
        "ink": "#16324f",
        "accent": "#075985",
        "focus": "#0f766e",
        "alert": "#8b1e3f",
        "panel": "#edf4f8",
        "white": "#ffffff"
      },
      "radii": {
        "card": "0.75rem",
        "pill": "9999px"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-radius-card": true,
      "wind-demo-radius-grid": true
    },
    "safelist": {
      "docs-preview": [
        "bg-panel",
        "p-2",
        "rounded-b-card",
        "rounded-bl-card",
        "rounded-br-card",
        "rounded-card",
        "rounded-l-card",
        "rounded-r-card",
        "rounded-t-card",
        "rounded-tl-card",
        "rounded-tr-card",
        "text-ink"
      ]
    }
  }
}
Authored demonstration CSS
.wind-demo-radius-grid { display: grid; grid-template-columns: repeat(3, minmax(5rem, 1fr)); gap: 0.6rem; max-width: 27rem; }
.wind-demo-radius-card { display: grid; place-items: center; min-height: 3.2rem; text-align: center; font: 12px/1.25 system-ui, sans-serif; }

Use a named, built-in, or one-off value

The pill name is configured, the bracket value is 18px, and full and none use the supported keywords.

Use a named, built-in, or one-off value
HTML
<div class="wind-demo-radius-values"><div class="wind-demo-radius-value rounded-pill bg-panel text-ink p-2">named pill</div><div class="wind-demo-radius-value rounded-[18px] bg-panel text-ink p-2">custom 18px</div><div class="wind-demo-radius-value rounded-full bg-panel text-ink p-2">full</div><div class="wind-demo-radius-value rounded-none bg-panel text-ink p-2">none</div></div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-color-accent: #075985;
    --zw-color-alert: #8b1e3f;
    --zw-color-focus: #0f766e;
    --zw-color-ink: #16324f;
    --zw-color-panel: #edf4f8;
    --zw-color-white: #fff;
    --zw-radius-card: .75rem;
    --zw-radius-pill: 9999px;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-radius-values {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  max-width: 30rem;
}

.wind-demo-radius-value {
  display: inline-block;
  font: 13px / 1.4 system-ui, sans-serif;
}
.p-2 {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.text-ink {
  color: var(--zw-color-ink);
}
.bg-panel {
  background-color: var(--zw-color-panel);
}
.rounded-\[18px\] {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  border-bottom-left-radius: 18px;
}
.rounded-full {
  border-top-left-radius: 9999px;
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
  border-bottom-left-radius: 9999px;
}
.rounded-none {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.rounded-pill {
  border-top-left-radius: var(--zw-radius-pill);
  border-top-right-radius: var(--zw-radius-pill);
  border-bottom-right-radius: var(--zw-radius-pill);
  border-bottom-left-radius: var(--zw-radius-pill);
}
Configuration for this example
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "colors": {
        "ink": "#16324f",
        "accent": "#075985",
        "focus": "#0f766e",
        "alert": "#8b1e3f",
        "panel": "#edf4f8",
        "white": "#ffffff"
      },
      "radii": {
        "card": "0.75rem",
        "pill": "9999px"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-radius-value": true,
      "wind-demo-radius-values": true
    },
    "safelist": {
      "docs-preview": [
        "bg-panel",
        "p-2",
        "rounded-[18px]",
        "rounded-full",
        "rounded-none",
        "rounded-pill",
        "text-ink"
      ]
    }
  }
}
Authored demonstration CSS
.wind-demo-radius-values { display: flex; flex-wrap: wrap; gap: 0.7rem; max-width: 30rem; }
.wind-demo-radius-value { display: inline-block; font: 13px/1.4 system-ui, sans-serif; }

Custom and named values

Named values resolve through tokens.radii; rounded-card is configured as 0.75rem and rounded-pill as 9999px. The built-in keywords rounded-none and rounded-full map to 0 and 9999px. Bracket values such as rounded-[18px] accept validated CSS lengths. Side names are physical: t, r, b, and l select top, right, bottom, and left; two-letter forms select one corner. Values cannot be negative. No default radius scale is inherited.

Related guides: Utility grammar · Variants

Catalog details

rounded

FieldValue
Catalog identifierv1.rounded
Class patternrounded-<suffix>
Grammar{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"border-top-left-radius","allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values2
Token categoriesradii
Negative-value policyforbidden
Conflict group and rankradius (27)
Order rank0
Selector shapeownElement
Spec version1
Emitter propertiesborder-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

Accepted values

KindSuffixEmitted value
keyword"none""0"
keyword"full""9999px"

Declaration templates

PropertyValue kindFixed value
border-top-left-radiusresolvednull
border-top-right-radiusresolvednull
border-bottom-right-radiusresolvednull
border-bottom-left-radiusresolvednull

Catalog examples

Example classExpected declarations
rounded-fullborder-top-left-radius: 9999px; border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px

rounded-b

FieldValue
Catalog identifierv1.rounded-b
Class patternrounded-b-<suffix>
Grammar{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"border-bottom-right-radius","allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values2
Token categoriesradii
Negative-value policyforbidden
Conflict group and rankradius (27)
Order rank1
Selector shapeownElement
Spec version1
Emitter propertiesborder-bottom-right-radius, border-bottom-left-radius

Accepted values

KindSuffixEmitted value
keyword"none""0"
keyword"full""9999px"

Declaration templates

PropertyValue kindFixed value
border-bottom-right-radiusresolvednull
border-bottom-left-radiusresolvednull

Catalog examples

Example classExpected declarations
rounded-b-fullborder-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px

rounded-l

FieldValue
Catalog identifierv1.rounded-l
Class patternrounded-l-<suffix>
Grammar{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"border-top-left-radius","allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values2
Token categoriesradii
Negative-value policyforbidden
Conflict group and rankradius (27)
Order rank1
Selector shapeownElement
Spec version1
Emitter propertiesborder-top-left-radius, border-bottom-left-radius

Accepted values

KindSuffixEmitted value
keyword"none""0"
keyword"full""9999px"

Declaration templates

PropertyValue kindFixed value
border-top-left-radiusresolvednull
border-bottom-left-radiusresolvednull

Catalog examples

Example classExpected declarations
rounded-l-fullborder-top-left-radius: 9999px; border-bottom-left-radius: 9999px

rounded-r

FieldValue
Catalog identifierv1.rounded-r
Class patternrounded-r-<suffix>
Grammar{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"border-top-right-radius","allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values2
Token categoriesradii
Negative-value policyforbidden
Conflict group and rankradius (27)
Order rank1
Selector shapeownElement
Spec version1
Emitter propertiesborder-top-right-radius, border-bottom-right-radius

Accepted values

KindSuffixEmitted value
keyword"none""0"
keyword"full""9999px"

Declaration templates

PropertyValue kindFixed value
border-top-right-radiusresolvednull
border-bottom-right-radiusresolvednull

Catalog examples

Example classExpected declarations
rounded-r-fullborder-top-right-radius: 9999px; border-bottom-right-radius: 9999px

rounded-t

FieldValue
Catalog identifierv1.rounded-t
Class patternrounded-t-<suffix>
Grammar{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"border-top-left-radius","allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values2
Token categoriesradii
Negative-value policyforbidden
Conflict group and rankradius (27)
Order rank1
Selector shapeownElement
Spec version1
Emitter propertiesborder-top-left-radius, border-top-right-radius

Accepted values

KindSuffixEmitted value
keyword"none""0"
keyword"full""9999px"

Declaration templates

PropertyValue kindFixed value
border-top-left-radiusresolvednull
border-top-right-radiusresolvednull

Catalog examples

Example classExpected declarations
rounded-t-fullborder-top-left-radius: 9999px; border-top-right-radius: 9999px

rounded-bl

FieldValue
Catalog identifierv1.rounded-bl
Class patternrounded-bl-<suffix>
Grammar{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"border-bottom-left-radius","allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values2
Token categoriesradii
Negative-value policyforbidden
Conflict group and rankradius (27)
Order rank2
Selector shapeownElement
Spec version1
Emitter propertiesborder-bottom-left-radius

Accepted values

KindSuffixEmitted value
keyword"none""0"
keyword"full""9999px"

Declaration templates

PropertyValue kindFixed value
border-bottom-left-radiusresolvednull

Catalog examples

Example classExpected declarations
rounded-bl-fullborder-bottom-left-radius: 9999px

rounded-br

FieldValue
Catalog identifierv1.rounded-br
Class patternrounded-br-<suffix>
Grammar{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"border-bottom-right-radius","allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values2
Token categoriesradii
Negative-value policyforbidden
Conflict group and rankradius (27)
Order rank2
Selector shapeownElement
Spec version1
Emitter propertiesborder-bottom-right-radius

Accepted values

KindSuffixEmitted value
keyword"none""0"
keyword"full""9999px"

Declaration templates

PropertyValue kindFixed value
border-bottom-right-radiusresolvednull

Catalog examples

Example classExpected declarations
rounded-br-fullborder-bottom-right-radius: 9999px

rounded-tl

FieldValue
Catalog identifierv1.rounded-tl
Class patternrounded-tl-<suffix>
Grammar{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"border-top-left-radius","allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values2
Token categoriesradii
Negative-value policyforbidden
Conflict group and rankradius (27)
Order rank2
Selector shapeownElement
Spec version1
Emitter propertiesborder-top-left-radius

Accepted values

KindSuffixEmitted value
keyword"none""0"
keyword"full""9999px"

Declaration templates

PropertyValue kindFixed value
border-top-left-radiusresolvednull

Catalog examples

Example classExpected declarations
rounded-tl-fullborder-top-left-radius: 9999px

rounded-tr

FieldValue
Catalog identifierv1.rounded-tr
Class patternrounded-tr-<suffix>
Grammar{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"border-top-right-radius","allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values2
Token categoriesradii
Negative-value policyforbidden
Conflict group and rankradius (27)
Order rank2
Selector shapeownElement
Spec version1
Emitter propertiesborder-top-right-radius

Accepted values

KindSuffixEmitted value
keyword"none""0"
keyword"full""9999px"

Declaration templates

PropertyValue kindFixed value
border-top-right-radiusresolvednull

Catalog examples

Example classExpected declarations
rounded-tr-fullborder-top-right-radius: 9999px

Revision History

CreatedUpdated