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

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

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

罫線を追加（Additive）

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

罫線の種類

設定例

四面全てに線<span class="border"></span>

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

二面に線<span class="border-end border-bottom"></span>

罫線を消す（Subtractive）

または境界線を削除：

罫線の種類

設定例

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

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

罫線の色（Color）

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

枠の色の種類

設定例

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

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

見本

設定例

<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>

不透明度（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.インラインスタイルで設定

見本

設定例

50%の不透明度のSuccess罫線<div class="border border-success p-2" style="--bs-border-opacity: .5;"></div>

2.定義済クラスで設定

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

不透明度の種類

設定例

75%の不透明度のSuccess罫線<div class="border border-success p-2 border-opacity-75"></div>

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

罫線の種類

設定例

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

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

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

角丸の種類

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>

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

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

大きさの種類

設定例

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

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);

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
),
"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))
),
"rounded-end": (
  property: border-top-right-radius border-bottom-right-radius,
  class: rounded-end,
  values: (null: var(--#{$prefix}border-radius))
),
"rounded-bottom": (
  property: border-bottom-right-radius border-bottom-left-radius,
  class: rounded-bottom,
  values: (null: var(--#{$prefix}border-radius))
),
"rounded-start": (
  property: border-bottom-left-radius border-top-left-radius,
  class: rounded-start,
  values: (null: var(--#{$prefix}border-radius))
),