メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
Check

境界ユーティリティ（Borders）

境界ユーティリティを使用して、要素の border と border-radius を素早くスタイル。画像、ボタン、またはその他の要素に最適。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版、v5.3.0-beta版での変更も含みます。
このページの項目

枠の罫線（Border）v5.0.0-beta1一部クラス名変更

罫線ユーティリティを使用して、要素枠の境界線の追加や削除をする。すべての罫線から選択するか、一度に1つずつ選択する。

罫線を追加（Additive）

カスタム要素に罫線を追加：

罫線の種類
四面全てに線：.border

一面に線

上部に線：.border-top 行末側に線：.border-endv5.0.0-beta1クラス名変更 下部に線：.border-bottom 行頭側に線：.border-startv5.0.0-beta1クラス名変更

二面に線（複数設定）

行末と下に線：.border-end.border-bottom 行頭と下に線：.border-start.border-bottom 行末と上に線：.border-end.border-top 行頭と上に線：.border-start.border-top 左右に線：.border-start.border-end 上下に線：.border-top.border-bottom
設定例
四面全てに線<span class="border"></span>
一面に線<span class="border-top"></span>
二面に線<span class="border-end border-bottom"></span>
【設定】
  • 罫線を入れたい部分がある場合は、その要素に .border(-{side})（上記の「罫線の種類」から選択）を入れる
【注意】
  • .border, .border-{side} には、あらかじめ罫線の太さ（1px）、種類（solid）、色（rgba($black, .15)）の設定が組み込まれている
【変更履歴】
  • 【v5.0.0-beta1】
    • RTL（右書き）の設定追加に伴いユーティリティのクラス名変更
      • 行頭側に線：.border-left ⇒ .border-start
      • 行末側に線：.border-right ⇒ .border-end

罫線を消す（Subtractive）

または罫線を削除：

罫線の種類
四面とも線なし：.border.border-0

三面に線（一面だけ線なし）

上部の線なし：.border.border-top-0 行末側の線なし：.border.border-end-0v5.0.0-beta1クラス名変更 下部の線なし：.border.border-bottom-0 行頭側の線なし：.border.border-start-0v5.0.0-beta1クラス名変更
設定例
四面とも線なし<span class="border border-0"></span>
三面に線<span class="border border-top-0"></span>
【設定】
  • 罫線を削除したい部分がある場合は、その要素に .border(-{side})-0（上記の「罫線の種類」から選択）を入れる
  • .border(-{side})-0 単独で使用可能（.border と組み合わせても可）
【注意】
  • .border-{side}-0 は、すでに罫線が入っている要素から部分的に罫線を削除する設定（テーブルの線を部分的に消すときなどに便利）
【変更履歴】
  • 【v5.0.0-beta1】
    • RTL（右書き）の設定追加に伴いユーティリティのクラス名変更
      • 行頭側の線なし：.border-left-0 ⇒ .border-start-0
      • 行末側の線なし：.border-right-0 ⇒ .border-end-0

罫線の色（Color）v5.3.0クラス追加

テーマカラーで構築されたユーティリティを使用して罫線の色を変更。

枠の色の種類
.border-primary .border-primary-subtlev5.3.0追加 .border-secondary .border-secondary-subtlev5.3.0追加 .border-success .border-success-subtlev5.3.0追加 .border-info .border-info-subtlev5.3.0追加 .border-warning .border-warning-subtlev5.3.0追加 .border-danger .border-danger-subtlev5.3.0追加 .border-light※色が見やすいように背景色と空白をつけています .border-light-subtlev5.3.0追加※色が見やすいように背景色と空白をつけています .border-dark .border-dark-subtlev5.3.0追加 .border-white※色が見やすいように背景色と空白をつけています
設定例
<span class="border border-primary"></span>

または、コンポーネントのデフォルトの border-color を変更v5.2.0追加：

見本
Dangerの見出し
罫線の色と幅の変更
設定例
<div class="mb-4">
  <label for="exampleFormControlInput1" class="form-label">Eメールアドレス</label>
  <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
  Dangerの見出し
</div>

<div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
  罫線の色と幅の変更
</div>
【設定】
  • 罫線を色付けしたい要素に .border-{themecolor}(-{subtle})（上記の「色の種類」から選択）を入れる
    • {themecolor} は、primary, secondary, success, info, danger, warning, light, dark, white のいずれかを選択（white には -{subtle} の設定はなし）
  • .border-{themecolor}(-{subtle}) 単独で使用可能（.border と組み合わせても可）
【注意】
  • .border-{themecolor} は、すでに罫線の設定（border）が入っている要素に色を付ける設定（テーブル、フォームコントロール、カード、リストグループなどの枠線に色を付けるときなどに利用可）
  • .border-{themecolor}-subtle はライトモードとダークモードで色が変わる
  • 色の設定を変更する場合は
    • ライトモード：scss/_variables.scss 内の ${themecolor}-border-{subtle} の値
    • ダークモード：scss/_variables-dark.scss 内の ${themecolor}-border-{subtle}-dark の値
    を変更して再コンパイルする
【変更履歴】
  • 【v5.3.0】
    • .border-{themecolor}-subtle が追加

不透明度（Opacity）v5.2.0新設

Bootstrapの border-{color} ユーティリティは、CSS変数を使用してSassで生成される。これにより、コンパイルや動的なアルファ透明度の変更なしで、リアルタイムの色が変更できる。

使い方（How it works）

デフォルトの .border-success ユーティリティについて考察：

.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}

アルファ透明度のために、RGBバージョンの --bs-success（値は 25, 135, 84）CSS変数を使用し、2番目のCSS変数 --bs-border-opacity を付加（ローカルCSS変数のおかげでデフォルト値は 1）。つまり、ここで .border-success を使用すると、計算された color 値は rgba(25, 135, 84, 1) になる。各 .border-* クラス内のローカルCSS変数は継承の問題を回避するため、ユーティリティの入れ子になったインスタンスには、自動的に変更されたアルファ透明度を持たない。

実例（Examples）

不透明度を変更するには、カスタムスタイルかインラインスタイルを使用して --bs-border-opacity を再定義する。

1.インラインスタイルで設定

見本
デフォルトのSuccess罫線
50%の不透明度のSuccess罫線
設定例
50%の不透明度のSuccess罫線<div class="border border-success p-2" style="--bs-border-opacity: .5;"></div>

2.定義済クラスで設定

または、.border-opacity ユーティリティのいずれかから選択する。

不透明度の種類

設定なし（参考）（--bs-border-opacity: 1）

デフォルトのSuccess罫線

.border-opacity-75（--bs-border-opacity: 0.75）

75%の不透明度のSuccess罫線

.border-opacity-50（--bs-border-opacity: 0.5）

50%の不透明度のSuccess罫線

.border-opacity-25（--bs-border-opacity: 0.25）

25%の不透明度のSuccess罫線

.border-opacity-10（--bs-border-opacity: 0.1）

10%の不透明度のSuccess罫線
設定例
75%の不透明度のSuccess罫線<div class="border border-success p-2 border-opacity-75"></div>
【設定】
  • .border に インラインで style="--bs-border-opacity: {%};" を入れるか、.border に .border-opacity-{%}（上記の「不透明度の種類」から選択）を追加

罫線の太さ（Width）v5.0.0-alpha2新設

罫線の種類
.border.border-1（border-width: 1px） .border.border-2（border-width: 2px） .border.border-3（border-width: 3px） .border.border-4（border-width: 4px） .border.border-5（border-width: 5px）
設定例
<span class="border border-1"></span>
【設定】
  • 罫線を設定したい部分の要素に .border.border-{size}（上記の「罫線の種類」から選択）を入れる

角丸（Radius）v5.0.0-beta1一部クラス名変更

要素にクラスを追加すると、簡単に角を丸くできる。

角丸の種類

画像に設定

プレースホルダ75x75  すべて角丸：.rounded（border-radius: 0.375rem）※デフォルトでは .rounded-2 と同じ プレースホルダ75x75  円：.rounded-circle（border-radius: 50%） プレースホルダ150x75  長丸：.rounded-pill（border-radius: 50rem）

二面に角丸

プレースホルダ75x75  上部が角丸：.rounded-top（border-top-left-radius: 0.375rem, border-top-right-radius: 0.375rem） プレースホルダ75x75  行末側が角丸：.rounded-end（border-top-right-radius: 0.375rem, border-bottom-right-radius: 0.375rem） v5.0.0-beta1クラス名変更 プレースホルダ75x75  下部が角丸：.rounded-bottom（border-bottom-left-radius: 0.375rem, border-bottom-right-radius: 0.375rem） プレースホルダ75x75  行頭側が角丸：.rounded-start（border-top-left-radius: 0.375rem, border-bottom-left-radius: 0.375rem） v5.0.0-beta1クラス名変更

三面に角丸（複数設定）

プレースホルダ75x75 行末下以外角丸：.rounded-top.rounded-start プレースホルダ75x75 行頭下以外角丸：.rounded-top.rounded-end プレースホルダ75x75 行末上以外角丸：.rounded-bottom.rounded-start プレースホルダ75x75 行頭上以外角丸：.rounded-bottom.rounded-end

背景色に設定

画像だけでなく、背景色にも設定できます。
すべて角丸だとカードに背景色を設定したものと変わらないように見えますが、カードには枠線の色も設定が入っています。

円の場合はそのまま設定すると、このようになります。

長丸の場合は、このようになります。

正円の設定

Bootstrap5.xの設定例 緑背景が変更箇所
すべて角丸<img src="..." alt="..." class="rounded">
円<img src="..." alt="..." class="rounded-circle"></code>
長丸<img src="..." alt="..." class="rounded-pill">
二面に角丸<img src="..." alt="..." class="rounded-top">
三面に角丸<img src="..." alt="..." class="rounded-top rounded-start">
背景色に設定<p class="bg-warning text-white rounded p-3">....</p>
円の場合<p class="bg-danger text-white rounded-circle p-3">...</p>
長丸の場合<p class="bg-success text-white rounded-pill p-3">...</p>
正円の設定<p class="bg-info text-dark rounded-circle position-relative" style="width:6rem;height:6rem;"><span class="position-absolute top-50 start-50 translate-middle text-nowrap">...</span></p>
【設定】
  • 設定したい要素に .rounded(-{side})（上記の「角丸の種類」から選択）を入れる
  • 正円の設定をする場合は、同じ大きさの幅（width）と高さ（height）のスタイルを同じ設定にしないと楕円になる。
【注意】
  • 一面だけ角丸の設定は不可の模様（検証はしていない）
【変更履歴】
  • 【v5.0.0-alpha3】
    • 正円の設定を調整（変換ユーティリティクラス等を使用）
  • 【v5.0.0-beta1】
    • RTL（右書き）の設定追加に伴いユーティリティのクラス名変更
      • 行頭側が角丸：.rounded-left ⇒ .rounded-start
      • 行末側が角丸：.rounded-right ⇒ .rounded-end
  • 【v5.2.0】
    • 各角丸クラス（.rounded(-{side})）のborder-radius（$border-radius）：0.25rem ⇒ 0.375rem（若干丸みを帯びたデザインに変更）

角丸の大きさ（Sizes）v5.0.0-alpha3クラス名変更、v5.3.0クラス追加

大きめや小さめの角丸にはスケーリングクラスを使用。サイズの範囲は 0 から 5 で、ユーティリティAPIの変更で構成できる。

大きさの種類
プレースホルダ75x75 角丸なし：.rounded-0（border-radius: 0） 小さめの角丸の画像75x75 小さめの角丸：.rounded-1（border-radius: 0.25rem）v5.0.0-alpha3クラス名変更 デフォルトの角丸の画像75x75 標準の角丸：.rounded-2（border-radius: 0.375rem）v5.0.0-alpha3追加※デフォルトでは .rounded と同じ 大きめの角丸の画像75x75 大きめの角丸：.rounded-3（border-radius: 0.5rem）v5.0.0-alpha3クラス名変更 大きめの角丸の画像75x75 特大の角丸：.rounded-4（border-radius: 1rem）v5.2.0追加 大きめの角丸の画像75x75 超特大の角丸：.rounded-5（border-radius: 2rem）v5.2.0追加
設定例
<img src="..." alt="..." class="rounded-0">
二面の角丸の大きさの種類 v5.3.0追加
下半分が小さめの角丸の画像75x75 下半分が小さめの角丸：.rounded-bottom-1 左半分が標準の角丸の画像75x75 左半分が標準の角丸：.rounded-start-2 右半分が円の画像75x75 右半分が円：.rounded-end-circle 左半分が長丸の画像75x75 左半分が長丸：.rounded-start-pill 下半分が超特大の角丸の画像75x75 下半分が超特大の角丸：.rounded-5.rounded-top-0
設定例
<img src="..." class="rounded-bottom-1" alt="...">
<img src="..." class="rounded-start-2" alt="...">
<img src="..." class="rounded-end-circle" alt="...">
<img src="..." class="rounded-start-pill" alt="...">
<img src="..." class="rounded-5 rounded-top-0" alt="...">
定義済クラスの種類
角丸の種類 上部が角丸
.rounded-top		 行末側が角丸
.rounded-end		 下部が角丸
.rounded-bottom		 行頭側が角丸
.rounded-start
角丸なし
.rounded-0		 .rounded-top-0 .rounded-end-0 .rounded-bottom-0 .rounded-start-0
小さめの角丸
.rounded-1		 .rounded-top-1 .rounded-end-1 .rounded-bottom-1 .rounded-start-1
標準の角丸
.rounded-2		 .rounded-top-2 .rounded-end-2 .rounded-bottom-2 .rounded-start-2
大きめの角丸
.rounded-3		 .rounded-top-3 .rounded-end-3 .rounded-bottom-3 .rounded-start-3
特大の角丸
.rounded-4		 .rounded-top-4 .rounded-end-4 .rounded-bottom-4 .rounded-start-4
超特大の角丸
.rounded-5		 .rounded-top-5 .rounded-end-5 .rounded-bottom-5 .rounded-start-5
円
.rounded-circle		 .rounded-top-circle .rounded-end-circle .rounded-bottom-circle .rounded-start-circle
長丸
.rounded-pill		 .rounded-top-pill .rounded-end-pill .rounded-bottom-pill .rounded-start-pill
【設定】
  • 設定したい要素に .rounded(-{side})-{size} を入れる（.rounded-{size} は上記の「大きさの種類」、.rounded-{side}-{size} は上記の「定義済クラスの種類」から選択）
【注意】
  • .rounded(-{side})-{size} は .rounded と組み合わせる必要はない
【変更履歴】
  • 【v5.0.0-alpha3】
    • .rounded-sm ⇒ .rounded-1
    • .rounded-lg ⇒ .rounded-3
    • .rounded-2 を追加
  • 【v5.2.0】
    • .rounded-1 のborder-radius（$border-radius-sm）：0.2rem ⇒ 0.25rem
    • .rounded-2 のborder-radius（$border-radius）：0.25rem ⇒ 0.375rem
    • .rounded-3 のborder-radius（$border-radius-lg）：0.3rem ⇒ 0.5rem
    • .rounded-4（$border-radius-xl）, .rounded-5（$border-radius-2xl）を追加
  • 【v5.3.0】
    • .rounded-{side}-{size} を追加

CSS v5.0.0-beta3追加、v5.2.0Sassより名称変更

CSS変数（Variables）

デフォルトの設定
scss/_root.scss 内 root-border-var の設定--#{$prefix}border-width: #{$border-width};
--#{$prefix}border-style: #{$border-style};
--#{$prefix}border-color: #{$border-color};
--#{$prefix}border-color-translucent: #{$border-color-translucent};

--#{$prefix}border-radius: #{$border-radius};
--#{$prefix}border-radius-sm: #{$border-radius-sm};
--#{$prefix}border-radius-lg: #{$border-radius-lg};
--#{$prefix}border-radius-xl: #{$border-radius-xl};
--#{$prefix}border-radius-2xl: #{$border-radius-2xl};
--#{$prefix}border-radius-pill: #{$border-radius-pill};

Sass変数（Sass variables）v5.2.0変数から名称変更

デフォルトの設定

罫線用の変数：

scss/_variables.scss 内 border-variables の設定$border-width:                1px;
$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px
);
$border-style:                solid;
$border-color:                $gray-300;
$border-color-translucent:    rgba($black, .175);

※淡い罫線の色の変数：

scss/_variables.scss 内 border-subtle-variables の設定$primary-border-subtle:   $blue-200;
$secondary-border-subtle: $gray-200;
$success-border-subtle:   $green-200;
$info-border-subtle:      $cyan-200;
$warning-border-subtle:   $yellow-200;
$danger-border-subtle:    $red-200;
$light-border-subtle:     $gray-200;
$dark-border-subtle:      $gray-500;

角丸の大きさの変数：

scss/_variables.scss 内 border-radius-variables の設定$border-radius:               .375rem;
$border-radius-sm:            .25rem;
$border-radius-lg:            .5rem;
$border-radius-xl:            1rem;
$border-radius-2xl:           2rem;
$border-radius-pill:          50rem;

Sass mixin（Sass mixins） v5.2.0mixinから名称変更

デフォルトの設定
scss/mixins/_border-radius.scss 内 border-radius-mixins の設定@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
  @if $enable-rounded {
    border-radius: valid-radius($radius);
  }
  @else if $fallback-border-radius != false {
    border-radius: $fallback-border-radius;
  }
}

@mixin border-top-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
    border-top-right-radius: valid-radius($radius);
  }
}

@mixin border-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-right-radius: valid-radius($radius);
    border-bottom-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius($radius);
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin border-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin border-top-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
  }
}

@mixin border-top-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-left-radius: valid-radius($radius);
  }
}

ユーティリティAPI（Utilities API）

境界ユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらに掲載。

デフォルトの設定
scss/_utilities.scss 内 utils-borders の設定"border": (
  property: border,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    0: 0,
  )
),
"border-top": (
  property: border-top,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    0: 0,
  )
),
"border-end": (
  property: border-right,
  class: border-end,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    0: 0,
  )
),
"border-bottom": (
  property: border-bottom,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    0: 0,
  )
),
"border-start": (
  property: border-left,
  class: border-start,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    0: 0,
  )
),
"border-color": (
  property: border-color,
  class: border,
  local-vars: (
    "border-opacity": 1
  ),
  values: $utilities-border-colors
),
"subtle-border-color": (
  property: border-color,
  class: border,
  values: $utilities-border-subtle
),
"border-width": (
  css-var: true,
  css-variable-name: border-width,
  class: border,
  values: $border-widths
),
"border-opacity": (
  css-var: true,
  class: border-opacity,
  values: (
    10: .1,
    25: .25,
    50: .5,
    75: .75,
    100: 1
  )
),
scss/_utilities.scss 内 utils-border-radius の設定"rounded": (
  property: border-radius,
  class: rounded,
  values: (
    null: var(--#{$prefix}border-radius),
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius),
    3: var(--#{$prefix}border-radius-lg),
    4: var(--#{$prefix}border-radius-xl),
    5: var(--#{$prefix}border-radius-2xl),
    circle: 50%,
    pill: var(--#{$prefix}border-radius-pill)
  )
),
"rounded-top": (
  property: border-top-left-radius border-top-right-radius,
  class: rounded-top,
  values: (
    null: var(--#{$prefix}border-radius),
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius),
    3: var(--#{$prefix}border-radius-lg),
    4: var(--#{$prefix}border-radius-xl),
    5: var(--#{$prefix}border-radius-2xl),
    circle: 50%,
    pill: var(--#{$prefix}border-radius-pill)
  )
),
"rounded-end": (
  property: border-top-right-radius border-bottom-right-radius,
  class: rounded-end,
  values: (
    null: var(--#{$prefix}border-radius),
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius),
    3: var(--#{$prefix}border-radius-lg),
    4: var(--#{$prefix}border-radius-xl),
    5: var(--#{$prefix}border-radius-2xl),
    circle: 50%,
    pill: var(--#{$prefix}border-radius-pill)
  )
),
"rounded-bottom": (
  property: border-bottom-right-radius border-bottom-left-radius,
  class: rounded-bottom,
  values: (
    null: var(--#{$prefix}border-radius),
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius),
    3: var(--#{$prefix}border-radius-lg),
    4: var(--#{$prefix}border-radius-xl),
    5: var(--#{$prefix}border-radius-2xl),
    circle: 50%,
    pill: var(--#{$prefix}border-radius-pill)
  )
),
"rounded-start": (
  property: border-bottom-left-radius border-top-left-radius,
  class: rounded-start,
  values: (
    null: var(--#{$prefix}border-radius),
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius),
    3: var(--#{$prefix}border-radius-lg),
    4: var(--#{$prefix}border-radius-xl),
    5: var(--#{$prefix}border-radius-2xl),
    circle: 50%,
    pill: var(--#{$prefix}border-radius-pill)
  )
),