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

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

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。

このページの項目

枠の罫線（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クラス追加

Bootstrapのオリジナルの $theme-colors Sassマップから生成された .border-* などの罫線色ユーティリティは、まだカラーモードに対応していないが、.border-*-subtle ユーティリティはすべて対応している。これはv6で解決される予定。

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

罫線の色の種類

.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-blackv5.3.0追加 .border-white※色が見やすいように背景色と空白をつけています

設定例

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

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

見本

Eメールアドレス

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, .border-black が追加

不透明度（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: {value};" を入れるか、.border に .border-opacity-{value}（上記の「不透明度の種類」から選択）を追加
- {value} は、10, 25, 50, 75 のいずれかを選択

罫線の太さ（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一部クラス名変更

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

角丸の種類

画像に設定

すべて角丸：.rounded（border-radius: 0.375rem）※デフォルトでは .rounded-2 と同じ円：.rounded-circle（border-radius: 50%）長丸：.rounded-pill（border-radius: 50rem）

二面に角丸

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

三面に角丸（複数設定）

行末下以外角丸：.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-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の変更で構成できる。

大きさの種類

角丸なし：.rounded-0（border-radius: 0）小さめの角丸：.rounded-1（border-radius: 0.25rem）v5.0.0-alpha3クラス名変更標準の角丸：.rounded-2（border-radius: 0.375rem）v5.0.0-alpha3追加※デフォルトでは .rounded と同じ大きめの角丸：.rounded-3（border-radius: 0.5rem）v5.0.0-alpha3クラス名変更特大の角丸：.rounded-4（border-radius: 1rem）v5.2.0追加超特大の角丸：.rounded-5（border-radius: 2rem）v5.2.0追加

設定例

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

二面の角丸の大きさの種類 v5.3.0追加

下半分が小さめの角丸：.rounded-bottom-1 左半分が標準の角丸：.rounded-start-2 右半分が円：.rounded-end-circle 左半分が長丸：.rounded-start-pill 下半分が超特大の角丸：.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で$border-radius-xxlに変更）を追加
【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-xxl: #{$border-radius-xxl};
--#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // v5.3.0では一貫性を保つために非推奨
--#{$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-radius-variables の設定$border-radius:               .375rem;
$border-radius-sm:            .25rem;
$border-radius-lg:            .5rem;
$border-radius-xl:            1rem;
$border-radius-xxl:           2rem;
$border-radius-pill:          50rem;

.border-*-subtle ユーティリティの border-color をライトモードとダークモードで設定するための変数：

scss/_variables.scss 内 border-subtle-variables の設定$primary-border-subtle:   tint-color($primary, 60%);
$secondary-border-subtle: tint-color($secondary, 60%);
$success-border-subtle:   tint-color($success, 60%);
$info-border-subtle:      tint-color($info, 60%);
$warning-border-subtle:   tint-color($warning, 60%);
$danger-border-subtle:    tint-color($danger, 60%);
$light-border-subtle:     $gray-200;
$dark-border-subtle:      $gray-500;

scss/_variables-dark.scss 内 theme-border-subtle-dark-variables の設定$primary-border-subtle-dark:        shade-color($primary, 40%);
$secondary-border-subtle-dark:      shade-color($secondary, 40%);
$success-border-subtle-dark:        shade-color($success, 40%);
$info-border-subtle-dark:           shade-color($info, 40%);
$warning-border-subtle-dark:        shade-color($warning, 40%);
$danger-border-subtle-dark:         shade-color($danger, 40%);
$light-border-subtle-dark:          $gray-700;
$dark-border-subtle-dark:           $gray-800;

Sassマップ（Sass maps）v5.3.0追加

カラーモード対応の罫線の色は、Sassのマップとしても利用可能：

デフォルトの設定

scss/_maps.scss 内 theme-border-subtle-map の設定$theme-colors-border-subtle: (
  "primary": $primary-border-subtle,
  "secondary": $secondary-border-subtle,
  "success": $success-border-subtle,
  "info": $info-border-subtle,
  "warning": $warning-border-subtle,
  "danger": $danger-border-subtle,
  "light": $light-border-subtle,
  "dark": $dark-border-subtle,
);

scss/_maps.scss 内 theme-border-subtle-dark-map の設定$theme-colors-border-subtle-dark: (
  "primary": $primary-border-subtle-dark,
  "secondary": $secondary-border-subtle-dark,
  "success": $success-border-subtle-dark,
  "info": $info-border-subtle-dark,
  "warning": $warning-border-subtle-dark,
  "danger": $danger-border-subtle-dark,
  "light": $light-border-subtle-dark,
  "dark": $dark-border-subtle-dark,
);

Sassミックスイン（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);
  }
}

SassユーティリティAPI（Sass utilities API）v5.3.0ユーティリティ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": (
  property: 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
  )
),

【注意】

border-width ユーティリティ（罫線の太さ）は、v5.3.0-alpha１でCSS変数ベースの --bs-border-width による設定に変更されたが、v5.3.0-alpha2でそのプロパティを直接設定（ border-width による設定）するように戻された。これによりテーブルを含む入れ子にした要素間での継承の問題を回避できる

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-xxl),
    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-xxl),
    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-xxl),
    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-xxl),
    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-xxl),
    circle: 50%,
    pill: var(--#{$prefix}border-radius-pill)
  )
),

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

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

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

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

罫線を追加（Additive）

罫線の種類

設定例

【設定】

【注意】

【変更履歴】

罫線を消す（Subtractive）

罫線の種類

設定例

【設定】

【注意】

【変更履歴】

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

罫線の色の種類

設定例

見本

設定例

【設定】

【注意】

【変更履歴】

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

使い方（How it works）

実例（Examples）

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

見本

設定例

2.定義済クラスで設定

不透明度の種類

設定例

【設定】

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

罫線の種類

設定例

【設定】

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

角丸の種類

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

【設定】

【注意】

【変更履歴】

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

大きさの種類

設定例

二面の角丸の大きさの種類 v5.3.0追加

設定例

定義済クラスの種類

【設定】

【注意】

【変更履歴】

CSS v5.0.0-beta3追加、v5.2.0Sassから名称変更

CSS変数（Variables）

デフォルトの設定

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

デフォルトの設定

Sassマップ（Sass maps）v5.3.0追加

デフォルトの設定

Sassミックスイン（Sass mixins）v5.2.0mixinから名称変更

デフォルトの設定

SassユーティリティAPI（Sass utilities API）v5.3.0ユーティリティAPIより名称変更

デフォルトの設定

【注意】

ページ移動

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