zfb
GitHub リポジトリ

検索したい単語を入力

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

ボーダー幅

物理的なボーダー幅をピクセルで設定し、実線のボーダースタイルにします。

四辺すべて、軸、または一辺の物理ボーダー幅を指定します。

クラスと CSS の早見表

クラスの例期待される宣言
borderborder-top-width: 1px; border-top-style: solid; border-right-width: 1px; border-right-style: solid; border-bottom-width: 1px; border-bottom-style: solid; border-left-width: 1px; border-left-style: solid;
border-x-4border-left-width: 4px; border-left-style: solid; border-right-width: 4px; border-right-style: solid;
border-y-2border-top-width: 2px; border-top-style: solid; border-bottom-width: 2px; border-bottom-style: solid;
border-b-[3px]border-bottom-width: 3px; border-bottom-style: solid;
border-l-4border-left-width: 4px; border-left-style: solid;
border-r-2border-right-width: 2px; border-right-style: solid;
border-t-4border-top-width: 4px; border-top-style: solid;
例の設定

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

使い方の例

四辺または物理軸の幅を指定する

border は四辺が 1px です。x は左右、y は上下を表し、数値はピクセルです。

四辺または物理軸の幅を指定する
HTML
<div class="wind-demo-widths"><div class="wind-demo-box border p-2">border · 1px on all sides</div><div class="wind-demo-box border-x-4 p-2">border-x-4 · left and right</div><div class="wind-demo-box border-y-2 p-2">border-y-2 · 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-widths {
  max-width: 32rem;
  color: #16324f;
  font: 14px / 1.5 system-ui, sans-serif;
}

.wind-demo-box {
  margin: .7rem 0;
}
.p-2 {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.border {
  border-top-width: 1px;
  border-top-style: solid;
  border-right-width: 1px;
  border-right-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-left-width: 1px;
  border-left-style: solid;
}
.border-x-4 {
  border-left-width: 4px;
  border-left-style: solid;
  border-right-width: 4px;
  border-right-style: solid;
}
.border-y-2 {
  border-top-width: 2px;
  border-top-style: solid;
  border-bottom-width: 2px;
  border-bottom-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-box": true,
      "wind-demo-widths": true
    },
    "safelist": {
      "docs-preview": [
        "border",
        "border-x-4",
        "border-y-2",
        "p-2"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-widths { max-width: 32rem; color: #16324f; font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-box { margin: 0.7rem 0; }

一辺ずつ幅を調整する

各ユーティリティは名前の物理辺を対象にし、border-b-[3px] は個別のピクセル幅を指定します。

一辺ずつ幅を調整する
HTML
<div class="wind-demo-widths"><div class="wind-demo-box border-t-4 p-2">top · 4px</div><div class="wind-demo-box border-r-2 p-2">right · 2px</div><div class="wind-demo-box border-b-[3px] p-2">bottom · 3px</div><div class="wind-demo-box border-l-4 p-2">left · 4px</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-widths {
  max-width: 32rem;
  color: #16324f;
  font: 14px / 1.5 system-ui, sans-serif;
}

.wind-demo-box {
  margin: .7rem 0;
}
.p-2 {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.border-b-\[3px\] {
  border-bottom-width: 3px;
  border-bottom-style: solid;
}
.border-l-4 {
  border-left-width: 4px;
  border-left-style: solid;
}
.border-r-2 {
  border-right-width: 2px;
  border-right-style: solid;
}
.border-t-4 {
  border-top-width: 4px;
  border-top-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-box": true,
      "wind-demo-widths": true
    },
    "safelist": {
      "docs-preview": [
        "border-b-[3px]",
        "border-l-4",
        "border-r-2",
        "border-t-4",
        "p-2"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-widths { max-width: 32rem; color: #16324f; font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-box { margin: 0.7rem 0; }

任意値と名前付きの値

引数なしの border は四辺に 1px solid を出力します。数値の接尾辞はピクセル長です。border-x-4 は左右、border-y-2 は上下に作用します。x/y は書字方向に応じて変化する論理軸ではなく物理辺です。border-t、border-r、border-b、border-l は各辺を指定します。角括弧には検証済み CSS 長さを指定できます。spacingUnit は使わず、負数も使えません。幅ユーティリティは対象辺のスタイルも solid にします。

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

カタログの詳細

border

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
border-top-widthresolvednull
border-top-stylefixed"solid"
border-right-widthresolvednull
border-right-stylefixed"solid"
border-bottom-widthresolvednull
border-bottom-stylefixed"solid"
border-left-widthresolvednull
border-left-stylefixed"solid"

カタログの例

クラスの例期待される宣言
borderborder-top-width: 1px; border-top-style: solid; border-right-width: 1px; border-right-style: solid; border-bottom-width: 1px; border-bottom-style: solid; border-left-width: 1px; border-left-style: solid

border-x

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
border-left-widthresolvednull
border-left-stylefixed"solid"
border-right-widthresolvednull
border-right-stylefixed"solid"

カタログの例

クラスの例期待される宣言
border-xborder-left-width: 1px; border-left-style: solid; border-right-width: 1px; border-right-style: solid

border-y

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
border-top-widthresolvednull
border-top-stylefixed"solid"
border-bottom-widthresolvednull
border-bottom-stylefixed"solid"

カタログの例

クラスの例期待される宣言
border-yborder-top-width: 1px; border-top-style: solid; border-bottom-width: 1px; border-bottom-style: solid

border-b

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
border-bottom-widthresolvednull
border-bottom-stylefixed"solid"

カタログの例

クラスの例期待される宣言
border-bborder-bottom-width: 1px; border-bottom-style: solid

border-l

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
border-left-widthresolvednull
border-left-stylefixed"solid"

カタログの例

クラスの例期待される宣言
border-lborder-left-width: 1px; border-left-style: solid

border-r

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
border-right-widthresolvednull
border-right-stylefixed"solid"

カタログの例

クラスの例期待される宣言
border-rborder-right-width: 1px; border-right-style: solid

border-t

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
border-top-widthresolvednull
border-top-stylefixed"solid"

カタログの例

クラスの例期待される宣言
border-tborder-top-width: 1px; border-top-style: solid

Revision History

作成更新