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

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

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

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

罫線を追加（Additive）

罫線の種類

四面全てに線：.border

●一面に線

上部に線：.border-top

行末側に線：.border-end v5.0.0-beta1クラス名変更

下部に線：.border-bottom

行頭側に線：.border-start v5.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(-{side}) は上記「罫線の種類」から選択）

【注意】

.border, .border-{side} には、あらかじめ罫線の太さ（1px）、種類（solid）、色（$gray-300）の設定が組み込まれている

【変更履歴】

【v5.0.0-beta1】
- RTL（右書き）の設定追加に伴いユーティリティのクラス名変更
  - 行頭側に線：.border-left ⇒ .border-start
  - 行末側に線：.border-right ⇒ .border-end

罫線を消す（Subtractive）

罫線の種類

四面とも線なし：.border.border-0

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

上部の線なし：.border.border-top-0

行末側の線なし：.border.border-end-0 v5.0.0-beta1クラス名変更

下部の線なし：.border.border-bottom-0

行頭側の線なし：.border.border-start-0 v5.0.0-beta1クラス名変更

設定例

四面とも線なし<span class="border border-0"></span>

三面に線<span class="border border-top-0"></span>

【設定】

罫線を削除したい部分がある場合は、その要素に .border(-{side})-0 を入れる（.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

罫線の色（Border color）

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

枠の色の種類

.border-primary

.border-secondary

.border-success

.border-info

.border-warning

.border-danger

.border-light ※色が見やすいように背景色と空白をつけています

.border-dark

.border-white ※色が見やすいように背景色と空白をつけています

設定例

<span class="border border-primary"></span>

【設定】

罫線を色付けしたい要素に .border-{themecolor} を入れる（.border-{themecolor} は上記「色の種類」から選択）

{themecolor} は、primary, secondary, success, info, warning, danger, light, dark, white のいずれかを選択

.border-{themecolor} 単独で使用可能（.border と組み合わせても可）

【注意】

.border-{themecolor} は、すでに罫線の設定（border）が入っている要素に色を付ける設定（テーブル、カード、リストグループなどの枠線に色を付けるときなどに利用）

罫線の太さ（Border-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} を入れる（.border-{size} は上記「罫線の種類」から選択）

境界の角丸（Border-radius）v5.0.0-beta1一部クラス名変更

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

角丸の種類

●画像に設定

すべて角丸：.rounded

●二面に角丸

上部が角丸：.rounded-top

行末側が角丸：.rounded-end v5.0.0-beta1クラス名変更

下部が角丸：.rounded-bottom

行頭側が角丸：.rounded-start v5.0.0-beta1クラス名変更

円：.rounded-circle

長丸：.rounded-pill

●三面に角丸（複数設定）

行末下以外角丸：.rounded-top.rounded-start

行頭下以外角丸：.rounded-top.rounded-end

行末上以外角丸：.rounded-bottom.rounded-start

行頭上以外角丸：.rounded-bottom.rounded-end

●背景色に設定

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

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

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

正円の設定

Bootstrap5.xの設定例緑背景が変更箇所

すべて角丸<img src="..." alt="..." class="rounded">

二面に角丸<img src="..." alt="..." class="rounded-top">

三面に角丸<img src="..." alt="..." class="rounded-top rounded-start">

円<img src="..." alt="..." class="rounded-circle"></code>

長丸<img src="..." alt="..." class="rounded-pill">

背景色に設定<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}) を入れる（.rounded(-{side}) は上記「角丸の種類」から選択）
正円の設定をする場合は、同じ大きさの幅（width）と高さ（height）のスタイルを同じ設定にしないと楕円になる。

【注意】

一面だけ角丸の設定は不可の模様（検証はしていない）

【変更履歴】

【v5.0.0-alpha3】
- 正円の設定を調整（変換ユーティリティクラス等を使用）
【v5.0.0-beta1】
- RTL（右書き）の設定追加に伴いユーティリティのクラス名変更
  - 行頭側が角丸：.rounded-left ⇒ .rounded-start
  - 行末側が角丸：.rounded-right ⇒ .rounded-end

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

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

大きさの種類

角丸なし：.rounded-0（border-radius: 0）

小さめの角丸：.rounded-1（border-radius: .2rem）v5.0.0-alpha3クラス名変更

デフォルトの角丸：.rounded-2（border-radius: .25rem、デフォルトでは .rounded と同じ）v5.0.0-alpha3追加

大きめの角丸：.rounded-3（border-radius: .3rem）v5.0.0-alpha3クラス名変更

設定例

<img src="..." alt="..." class="rounded-0">

【設定】

設定したい要素に .rounded-{size} を入れる（.rounded-{size} は上記「大きさの種類」から選択）

【注意】

.rounded-{size} は .rounded と組み合わせる必要はない

【変更履歴】

【v5.0.0-alpha3】
- .rounded-sm ⇒ .rounded-1
- .rounded-lg ⇒ .rounded-3
- .rounded-2 を追加

Sass v5.0.0-beta3追加

変数（Variables）

デフォルトの設定

scss/_variables.scss 内 border-variables の設定$border-width:                1px;
$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px
);

$border-color:                $gray-300;

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

mixin（Mixins）

デフォルトの設定

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 内 border-variables の設定"border": (
  property: border,
  values: (
    null: $border-width solid $border-color,
    0: 0,
  )
),
"border-top": (
  property: border-top,
  values: (
    null: $border-width solid $border-color,
    0: 0,
  )
),
"border-end": (
  property: border-right,
  class: border-end,
  values: (
    null: $border-width solid $border-color,
    0: 0,
  )
),
"border-bottom": (
  property: border-bottom,
  values: (
    null: $border-width solid $border-color,
    0: 0,
  )
),
"border-start": (
  property: border-left,
  class: border-start,
  values: (
    null: $border-width solid $border-color,
    0: 0,
  )
),
"border-color": (
  property: border-color,
  class: border,
  values: map-merge($theme-colors, ("white": $white))
),
"border-width": (
  property: border-width,
  class: border,
  values: $border-widths
),

scss/_utilities.scss 内 border-variables の設定    "rounded": (
  property: border-radius,
  class: rounded,
  values: (
    null: $border-radius,
    0: 0,
    1: $border-radius-sm,
    2: $border-radius,
    3: $border-radius-lg,
    circle: 50%,
    pill: $border-radius-pill
  )
),
"rounded-top": (
  property: border-top-left-radius border-top-right-radius,
  class: rounded-top,
  values: (null: $border-radius)
),
"rounded-end": (
  property: border-top-right-radius border-bottom-right-radius,
  class: rounded-end,
  values: (null: $border-radius)
),
"rounded-bottom": (
  property: border-bottom-right-radius border-bottom-left-radius,
  class: rounded-bottom,
  values: (null: $border-radius)
),
"rounded-start": (
  property: border-bottom-left-radius border-top-left-radius,
  class: rounded-start,
  values: (null: $border-radius)
),

前のページ
背景ユーティリティ

次のページ
カラーユーティリティ

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

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

罫線を追加（Additive）

罫線の種類

設定例

【設定】

【注意】

【変更履歴】

罫線を消す（Subtractive）

罫線の種類

設定例

【設定】

【注意】

【変更履歴】

罫線の色（Border color）

枠の色の種類

設定例

【設定】

【注意】

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

罫線の種類

設定例

【設定】

境界の角丸（Border-radius）v5.0.0-beta1一部クラス名変更

角丸の種類

Bootstrap5.xの設定例 緑背景が変更箇所

【設定】

【注意】

【変更履歴】

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

大きさの種類

設定例

【設定】

【注意】

【変更履歴】

Sass v5.0.0-beta3追加

変数（Variables）

デフォルトの設定

mixin（Mixins）

デフォルトの設定

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

デフォルトの設定

ページ移動

Bootstrap5.xの設定例緑背景が変更箇所