zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

ボーダー色

設定された値または検証済みの任意の色から各辺のボーダー色を設定します。

ボーダー全体、軸、または物理的な一辺に色を指定します。

クラスと CSS の早見表

クラスの例期待される宣言
border-inkborder-top-color: var(--zw-color-ink); border-right-color: var(--zw-color-ink); border-bottom-color: var(--zw-color-ink); border-left-color: var(--zw-color-ink);
border-x-accent/85border-left-color: color-mix(in oklab, var(--zw-color-accent) 85%, transparent); border-right-color: color-mix(in oklab, var(--zw-color-accent) 85%, transparent);
border-y-focusborder-top-color: var(--zw-color-focus); border-bottom-color: var(--zw-color-focus);
border-b-alert/90border-bottom-color: color-mix(in oklab, var(--zw-color-alert) 90%, transparent);
border-l-inkborder-left-color: var(--zw-color-ink);
border-r-accentborder-right-color: var(--zw-color-accent);
border-t-focusborder-top-color: var(--zw-color-focus);
例の設定

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

使い方の例

全体または軸の両側に色を付ける

border-ink は四辺、border-x-accent/85 は左右、border-y-focus は上下を着色します。

全体または軸の両側に色を付ける
HTML
<div class="wind-demo-border-colors"><div class="wind-demo-color-box border-4 border-ink p-2">border-ink · all sides</div><div class="wind-demo-color-box border-4 border-x-accent/85 p-2">border-x-accent/85 · left and right</div><div class="wind-demo-color-box border-4 border-y-focus p-2">border-y-focus · top and bottom</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-spacing-unit: .25rem;
  }
}
.wind-demo-border-colors {
  max-width: 34rem;
  color: #16324f;
  font: 14px / 1.5 system-ui, sans-serif;
}

.wind-demo-color-box {
  margin: .7rem 0;
}
.p-2 {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.border-4 {
  border-top-width: 4px;
  border-top-style: solid;
  border-right-width: 4px;
  border-right-style: solid;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-left-width: 4px;
  border-left-style: solid;
}
.border-ink {
  border-top-color: var(--zw-color-ink);
  border-right-color: var(--zw-color-ink);
  border-bottom-color: var(--zw-color-ink);
  border-left-color: var(--zw-color-ink);
}
.border-x-accent\/85 {
  border-left-color: color-mix(in oklab, var(--zw-color-accent) 85%, transparent);
  border-right-color: color-mix(in oklab, var(--zw-color-accent) 85%, transparent);
}
.border-y-focus {
  border-top-color: var(--zw-color-focus);
  border-bottom-color: var(--zw-color-focus);
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "colors": {
        "ink": "#16324f",
        "accent": "#075985",
        "focus": "#0f766e",
        "alert": "#8b1e3f",
        "panel": "#edf4f8",
        "white": "#ffffff"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-border-colors": true,
      "wind-demo-color-box": true
    },
    "safelist": {
      "docs-preview": [
        "border-4",
        "border-ink",
        "border-x-accent/85",
        "border-y-focus",
        "p-2"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-border-colors { max-width: 34rem; color: #16324f; font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-color-box { margin: 0.7rem 0; }

辺ごとに色を分ける

辺別ユーティリティは指定した物理辺だけを変え、border-4 が見える幅を与えます。

辺ごとに色を分ける
HTML
<div class="wind-demo-border-colors"><div class="wind-demo-color-box border-4 border-t-focus p-2">top · focus</div><div class="wind-demo-color-box border-4 border-r-accent p-2">right · accent</div><div class="wind-demo-color-box border-4 border-b-alert/90 p-2">bottom · alert</div><div class="wind-demo-color-box border-4 border-l-ink p-2">left · ink</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-spacing-unit: .25rem;
  }
}
.wind-demo-border-colors {
  max-width: 34rem;
  color: #16324f;
  font: 14px / 1.5 system-ui, sans-serif;
}

.wind-demo-color-box {
  margin: .7rem 0;
}
.p-2 {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.border-4 {
  border-top-width: 4px;
  border-top-style: solid;
  border-right-width: 4px;
  border-right-style: solid;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-left-width: 4px;
  border-left-style: solid;
}
.border-b-alert\/90 {
  border-bottom-color: color-mix(in oklab, var(--zw-color-alert) 90%, transparent);
}
.border-l-ink {
  border-left-color: var(--zw-color-ink);
}
.border-r-accent {
  border-right-color: var(--zw-color-accent);
}
.border-t-focus {
  border-top-color: var(--zw-color-focus);
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "colors": {
        "ink": "#16324f",
        "accent": "#075985",
        "focus": "#0f766e",
        "alert": "#8b1e3f",
        "panel": "#edf4f8",
        "white": "#ffffff"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-border-colors": true,
      "wind-demo-color-box": true
    },
    "safelist": {
      "docs-preview": [
        "border-4",
        "border-b-alert/90",
        "border-l-ink",
        "border-r-accent",
        "border-t-focus",
        "p-2"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-border-colors { max-width: 34rem; color: #16324f; font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-color-box { margin: 0.7rem 0; }

任意値と名前付きの値

border-ink のような名前は tokens.colors に設定します。既定パレットはありません。border-current と border-transparent も使えます。border-x-accent/85 のような色のスラッシュ修飾子には 0〜100 の整数を指定します。角括弧には検証済み CSS 色を指定できます。border、border-x、border-y と辺別の形は物理辺を選びます。色を見せるには幅ユーティリティと組み合わせます。幅と色は同じクラス根を共有するため、数値の接尾辞は幅、設定済み色名は色として解釈されます。

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

カタログの詳細

border

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

受け入れる値

種類接尾辞出力される値
keyword"transparent""transparent"
keyword"current""currentColor"

宣言テンプレート

プロパティ値の種類固定値
border-top-colorresolvednull
border-right-colorresolvednull
border-bottom-colorresolvednull
border-left-colorresolvednull

カタログの例

クラスの例期待される宣言
border-[red]/40border-top-color: color-mix(in oklab, red 40%, transparent); border-right-color: color-mix(in oklab, red 40%, transparent); border-bottom-color: color-mix(in oklab, red 40%, transparent); border-left-color: color-mix(in oklab, red 40%, transparent)

border-x

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

受け入れる値

種類接尾辞出力される値
keyword"transparent""transparent"
keyword"current""currentColor"

宣言テンプレート

プロパティ値の種類固定値
border-left-colorresolvednull
border-right-colorresolvednull

カタログの例

クラスの例期待される宣言
border-x-[red]/40border-left-color: color-mix(in oklab, red 40%, transparent); border-right-color: color-mix(in oklab, red 40%, transparent)

border-y

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

受け入れる値

種類接尾辞出力される値
keyword"transparent""transparent"
keyword"current""currentColor"

宣言テンプレート

プロパティ値の種類固定値
border-top-colorresolvednull
border-bottom-colorresolvednull

カタログの例

クラスの例期待される宣言
border-y-[red]/40border-top-color: color-mix(in oklab, red 40%, transparent); border-bottom-color: color-mix(in oklab, red 40%, transparent)

border-b

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

受け入れる値

種類接尾辞出力される値
keyword"transparent""transparent"
keyword"current""currentColor"

宣言テンプレート

プロパティ値の種類固定値
border-bottom-colorresolvednull

カタログの例

クラスの例期待される宣言
border-b-[red]/40border-bottom-color: color-mix(in oklab, red 40%, transparent)

border-l

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

受け入れる値

種類接尾辞出力される値
keyword"transparent""transparent"
keyword"current""currentColor"

宣言テンプレート

プロパティ値の種類固定値
border-left-colorresolvednull

カタログの例

クラスの例期待される宣言
border-l-[red]/40border-left-color: color-mix(in oklab, red 40%, transparent)

border-r

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

受け入れる値

種類接尾辞出力される値
keyword"transparent""transparent"
keyword"current""currentColor"

宣言テンプレート

プロパティ値の種類固定値
border-right-colorresolvednull

カタログの例

クラスの例期待される宣言
border-r-[red]/40border-right-color: color-mix(in oklab, red 40%, transparent)

border-t

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

受け入れる値

種類接尾辞出力される値
keyword"transparent""transparent"
keyword"current""currentColor"

宣言テンプレート

プロパティ値の種類固定値
border-top-colorresolvednull

カタログの例

クラスの例期待される宣言
border-t-[red]/40border-top-color: color-mix(in oklab, red 40%, transparent)

Revision History

作成更新