角丸

設定された角丸の値を、全角、辺の角、個別の角に適用します。

四隅、物理辺の二つの角、または一つの角を丸めます。

クラスと CSS の早見表

クラスの例	期待される宣言
`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);`

例の設定

共通プレビュー設定では spec 1、reset: "none"、strict モード、tokens.spacingUnit: "0.25rem"、ブレークポイントなしを明示しています。名前付きの値は各例で設定し、既定のパレットやテーマは継承しません。wind-demo クラスはデモ用の自作スタイルです。各例では、その CSS とユーティリティの宣言を分けて確認できます。

使い方の例

辺と個別の角を丸める

すべてのカードで同じ radius トークンを使い、対象にした辺または角だけを変えます。

辺と個別の角を丸める

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);
}

この例の設定

{
  "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"
      ]
    }
  }
}

デモ用の自作 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; }

名前付き、組み込み、個別の値を使う

pill は設定済みの名前、角括弧は 18px、full と none は対応キーワードです。

名前付き、組み込み、個別の値を使う

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);
}

この例の設定

{
  "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"
      ]
    }
  }
}

デモ用の自作 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; }

任意値と名前付きの値

名前付きの値は tokens.radii を参照します。rounded-card は 0.75rem、rounded-pill は 9999px と設定しています。rounded-none と rounded-full は組み込みキーワードで、それぞれ 0 と 9999px になります。rounded-[18px] のような角括弧には検証済み CSS 長さを指定できます。辺の名前は物理方向で、t/r/b/l は上/右/下/左、二文字の形は一つの角を選びます。負数は使えません。既定の半径スケールは継承しません。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

rounded

フィールド	値
カタログ識別子	`v1.rounded`
クラスパターン	`rounded-<suffix>`
文法	`{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"border-top-left-radius","allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`2`
トークンカテゴリ	`radii`
負の値の規則	`forbidden`
競合グループと順位	`radius` (`27`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, `border-bottom-left-radius`

受け入れる値

種類	接尾辞	出力される値
`keyword`	`"none"`	`"0"`
`keyword`	`"full"`	`"9999px"`

宣言テンプレート

プロパティ	値の種類	固定値
`border-top-left-radius`	`resolved`	`null`
`border-top-right-radius`	`resolved`	`null`
`border-bottom-right-radius`	`resolved`	`null`
`border-bottom-left-radius`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`rounded-full`	`border-top-left-radius: 9999px`; `border-top-right-radius: 9999px`; `border-bottom-right-radius: 9999px`; `border-bottom-left-radius: 9999px`

rounded-b

フィールド	値
カタログ識別子	`v1.rounded-b`
クラスパターン	`rounded-b-<suffix>`
文法	`{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"border-bottom-right-radius","allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`2`
トークンカテゴリ	`radii`
負の値の規則	`forbidden`
競合グループと順位	`radius` (`27`)
並び順の順位	`1`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`border-bottom-right-radius`, `border-bottom-left-radius`

受け入れる値

種類	接尾辞	出力される値
`keyword`	`"none"`	`"0"`
`keyword`	`"full"`	`"9999px"`

宣言テンプレート

プロパティ	値の種類	固定値
`border-bottom-right-radius`	`resolved`	`null`
`border-bottom-left-radius`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`rounded-b-full`	`border-bottom-right-radius: 9999px`; `border-bottom-left-radius: 9999px`

rounded-l

フィールド	値
カタログ識別子	`v1.rounded-l`
クラスパターン	`rounded-l-<suffix>`
文法	`{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"border-top-left-radius","allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`2`
トークンカテゴリ	`radii`
負の値の規則	`forbidden`
競合グループと順位	`radius` (`27`)
並び順の順位	`1`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`border-top-left-radius`, `border-bottom-left-radius`

受け入れる値

種類	接尾辞	出力される値
`keyword`	`"none"`	`"0"`
`keyword`	`"full"`	`"9999px"`

宣言テンプレート

プロパティ	値の種類	固定値
`border-top-left-radius`	`resolved`	`null`
`border-bottom-left-radius`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`rounded-l-full`	`border-top-left-radius: 9999px`; `border-bottom-left-radius: 9999px`

rounded-r

フィールド	値
カタログ識別子	`v1.rounded-r`
クラスパターン	`rounded-r-<suffix>`
文法	`{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"border-top-right-radius","allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`2`
トークンカテゴリ	`radii`
負の値の規則	`forbidden`
競合グループと順位	`radius` (`27`)
並び順の順位	`1`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`border-top-right-radius`, `border-bottom-right-radius`

受け入れる値

種類	接尾辞	出力される値
`keyword`	`"none"`	`"0"`
`keyword`	`"full"`	`"9999px"`

宣言テンプレート

プロパティ	値の種類	固定値
`border-top-right-radius`	`resolved`	`null`
`border-bottom-right-radius`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`rounded-r-full`	`border-top-right-radius: 9999px`; `border-bottom-right-radius: 9999px`

rounded-t

フィールド	値
カタログ識別子	`v1.rounded-t`
クラスパターン	`rounded-t-<suffix>`
文法	`{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"border-top-left-radius","allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`2`
トークンカテゴリ	`radii`
負の値の規則	`forbidden`
競合グループと順位	`radius` (`27`)
並び順の順位	`1`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`border-top-left-radius`, `border-top-right-radius`

受け入れる値

種類	接尾辞	出力される値
`keyword`	`"none"`	`"0"`
`keyword`	`"full"`	`"9999px"`

宣言テンプレート

プロパティ	値の種類	固定値
`border-top-left-radius`	`resolved`	`null`
`border-top-right-radius`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`rounded-t-full`	`border-top-left-radius: 9999px`; `border-top-right-radius: 9999px`

rounded-bl

フィールド	値
カタログ識別子	`v1.rounded-bl`
クラスパターン	`rounded-bl-<suffix>`
文法	`{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"border-bottom-left-radius","allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`2`
トークンカテゴリ	`radii`
負の値の規則	`forbidden`
競合グループと順位	`radius` (`27`)
並び順の順位	`2`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`border-bottom-left-radius`

受け入れる値

種類	接尾辞	出力される値
`keyword`	`"none"`	`"0"`
`keyword`	`"full"`	`"9999px"`

宣言テンプレート

プロパティ	値の種類	固定値
`border-bottom-left-radius`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`rounded-bl-full`	`border-bottom-left-radius: 9999px`

rounded-br

フィールド	値
カタログ識別子	`v1.rounded-br`
クラスパターン	`rounded-br-<suffix>`
文法	`{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"border-bottom-right-radius","allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`2`
トークンカテゴリ	`radii`
負の値の規則	`forbidden`
競合グループと順位	`radius` (`27`)
並び順の順位	`2`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`border-bottom-right-radius`

受け入れる値

種類	接尾辞	出力される値
`keyword`	`"none"`	`"0"`
`keyword`	`"full"`	`"9999px"`

宣言テンプレート

プロパティ	値の種類	固定値
`border-bottom-right-radius`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`rounded-br-full`	`border-bottom-right-radius: 9999px`

rounded-tl

フィールド	値
カタログ識別子	`v1.rounded-tl`
クラスパターン	`rounded-tl-<suffix>`
文法	`{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"border-top-left-radius","allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`2`
トークンカテゴリ	`radii`
負の値の規則	`forbidden`
競合グループと順位	`radius` (`27`)
並び順の順位	`2`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`border-top-left-radius`

受け入れる値

種類	接尾辞	出力される値
`keyword`	`"none"`	`"0"`
`keyword`	`"full"`	`"9999px"`

宣言テンプレート

プロパティ	値の種類	固定値
`border-top-left-radius`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`rounded-tl-full`	`border-top-left-radius: 9999px`

rounded-tr

フィールド	値
カタログ識別子	`v1.rounded-tr`
クラスパターン	`rounded-tr-<suffix>`
文法	`{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"border-top-right-radius","allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`2`
トークンカテゴリ	`radii`
負の値の規則	`forbidden`
競合グループと順位	`radius` (`27`)
並び順の順位	`2`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`border-top-right-radius`

受け入れる値

種類	接尾辞	出力される値
`keyword`	`"none"`	`"0"`
`keyword`	`"full"`	`"9999px"`

宣言テンプレート

プロパティ	値の種類	固定値
`border-top-right-radius`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`rounded-tr-full`	`border-top-right-radius: 9999px`

角丸

クラスと CSS の早見表

使い方の例

辺と個別の角を丸める

名前付き、組み込み、個別の値を使う

任意値と名前付きの値

rounded

受け入れる値

宣言テンプレート

カタログの例

rounded-b

受け入れる値

宣言テンプレート

カタログの例

rounded-l

受け入れる値

宣言テンプレート

カタログの例

rounded-r

受け入れる値

宣言テンプレート

カタログの例

rounded-t

受け入れる値

宣言テンプレート

カタログの例

rounded-bl

受け入れる値

宣言テンプレート

カタログの例

rounded-br

受け入れる値

宣言テンプレート

カタログの例

rounded-tl

受け入れる値

宣言テンプレート

カタログの例

rounded-tr

受け入れる値

宣言テンプレート

カタログの例

Revision History