zfb
GitHub リポジトリ

検索したい単語を入力

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

ボーダースタイル

対応する線種またはボーダーの結合動作を選びます。

対応するボーダー線のスタイル、線の非表示、またはテーブルの border-collapse を指定します。

クラスと CSS の早見表

クラスの例期待される宣言
border-dashedborder-style: dashed;
border-dottedborder-style: dotted;
border-doubleborder-style: double;
border-noneborder-style: none;
border-solidborder-style: solid;
border-collapseborder-collapse: collapse;
border-collapse-separateborder-collapse: separate;
例の設定

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

使い方の例

線のパターンを比べる

幅ユーティリティで各線を見えるようにします。border-none は幅を残したままスタイルを none にします。

線のパターンを比べる
HTML
<div class="wind-demo-lines"><div class="wind-demo-line border-2 border-solid p-2">solid</div><div class="wind-demo-line border-2 border-dashed p-2">dashed</div><div class="wind-demo-line border-2 border-dotted p-2">dotted</div><div class="wind-demo-line border-4 border-double p-2">double</div><div class="wind-demo-line border-2 border-none p-2">none · no line</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-lines {
  max-width: 30rem;
  color: #16324f;
  font: 14px / 1.5 system-ui, sans-serif;
}

.wind-demo-line {
  margin: .55rem 0;
}
.p-2 {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.border-2 {
  border-top-width: 2px;
  border-top-style: solid;
  border-right-width: 2px;
  border-right-style: solid;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-left-width: 2px;
  border-left-style: solid;
}
.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-dashed {
  border-style: dashed;
}
.border-dotted {
  border-style: dotted;
}
.border-double {
  border-style: double;
}
.border-none {
  border-style: none;
}
.border-solid {
  border-style: solid;
}
この例の設定
{
  "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-line": true,
      "wind-demo-lines": true
    },
    "safelist": {
      "docs-preview": [
        "border-2",
        "border-4",
        "border-dashed",
        "border-dotted",
        "border-double",
        "border-none",
        "border-solid",
        "p-2"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-lines { max-width: 30rem; color: #16324f; font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-line { margin: 0.55rem 0; }

セルのボーダーの接続方法を選ぶ

各テーブルのユーティリティが線を結合するか分離するかを決めます。比較用にデモ CSS がセルの辺と間隔を用意します。

セルのボーダーの接続方法を選ぶ
HTML
<div class="wind-demo-tables"><table class="wind-demo-table border-collapse"><tbody><tr><td class="wind-demo-cell">A</td><td class="wind-demo-cell">B</td></tr></tbody></table><table class="wind-demo-table border-collapse-separate"><tbody><tr><td class="wind-demo-cell">A</td><td class="wind-demo-cell">B</td></tr></tbody></table></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-tables {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  color: #16324f;
  font: 14px / 1.4 system-ui, sans-serif;
}

.wind-demo-table {
  border-spacing: .45rem;
}

.wind-demo-cell {
  border: 2px solid #0f766e;
  padding: .6rem 1rem;
  text-align: center;
}
.border-collapse {
  border-collapse: collapse;
}
.border-collapse-separate {
  border-collapse: separate;
}
この例の設定
{
  "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-cell": true,
      "wind-demo-table": true,
      "wind-demo-tables": true
    },
    "safelist": {
      "docs-preview": [
        "border-collapse",
        "border-collapse-separate"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-tables { display: flex; flex-wrap: wrap; gap: 1rem; color: #16324f; font: 14px/1.4 system-ui, sans-serif; }
.wind-demo-table { border-spacing: 0.45rem; }
.wind-demo-cell { border: 2px solid #0f766e; padding: 0.6rem 1rem; text-align: center; }

任意値と名前付きの値

border-solid、border-dashed、border-dotted、border-double、border-none は border-style を設定します。線を見せるには幅ユーティリティも組み合わせます。スタイルだけでは幅を追加しません。border-none はスタイルだけを none にします。border-collapse と border-collapse-separate はテーブルの border-collapse プロパティを設定します。セルの線を接続するか分離するかを選べます。border の幅ユーティリティ自体も solid スタイルを設定します。

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

カタログの詳細

border-dashed

フィールド値
カタログ識別子v1.border.style.dashed
クラスパターンborder-dashed
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位border-style (26)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティborder-style

受け入れる値

種類接尾辞出力される値
exactnull"dashed"

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
border-dashedborder-style: dashed

border-dotted

フィールド値
カタログ識別子v1.border.style.dotted
クラスパターンborder-dotted
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位border-style (26)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティborder-style

受け入れる値

種類接尾辞出力される値
exactnull"dotted"

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
border-dottedborder-style: dotted

border-double

フィールド値
カタログ識別子v1.border.style.double
クラスパターンborder-double
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位border-style (26)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティborder-style

受け入れる値

種類接尾辞出力される値
exactnull"double"

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
border-doubleborder-style: double

border-none

フィールド値
カタログ識別子v1.border.style.none
クラスパターンborder-none
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位border-style (26)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティborder-style

受け入れる値

種類接尾辞出力される値
exactnull"none"

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
border-noneborder-style: none

border-solid

フィールド値
カタログ識別子v1.border.style.solid
クラスパターンborder-solid
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位border-style (26)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティborder-style

受け入れる値

種類接尾辞出力される値
exactnull"solid"

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
border-solidborder-style: solid

border-collapse

フィールド値
カタログ識別子v1.border.style.collapse
クラスパターンborder-collapse
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位border-style (26)
並び順の順位1
セレクタの形ownElement
仕様バージョン1
出力するプロパティborder-collapse

受け入れる値

種類接尾辞出力される値
exactnull"collapse"

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
border-collapseborder-collapse: collapse

border-collapse-separate

フィールド値
カタログ識別子v1.border.style.separate
クラスパターンborder-collapse-separate
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位border-style (26)
並び順の順位1
セレクタの形ownElement
仕様バージョン1
出力するプロパティborder-collapse

受け入れる値

種類接尾辞出力される値
exactnull"separate"

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
border-collapse-separateborder-collapse: separate

Revision History

作成更新