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

境界ユーティリティ(Borders)

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

※v5.2.0-beta1はプレリリースのため、"v5.2.0"での変更は再変更される可能性があります。

枠の罫線(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(-{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(-{side})-0 単独で使用可能(.border と組み合わせても可)
【注意】
  • .border-{side}-0 は、すでに罫線が入っている要素から部分的に罫線を削除する設定(テーブルの線を部分的に消すときなどに便利)
【変更履歴】
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
      • 行頭側の線なし:.border-left-0.border-start-0
      • 行末側の線なし:.border-right-0.border-end-0

罫線の色(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-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} を入れる(.border-{themecolor} は上記「色の種類」から選択)
    • {themecolor} は、primary, secondary, success, info, warning, danger, light, dark, white のいずれかを選択
  • .border-{themecolor} 単独で使用可能(.border と組み合わせても可)
【注意】
  • .border-{themecolor} は、すでに罫線の設定(border)が入っている要素に色を付ける設定(テーブル、フォームコントロール、カードリストグループなどの枠線に色を付けるときなどに利用可)

不透明度(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-{%} を追加(.border-opacity-{%} は上記「不透明度の種類」から選択)

罫線の太さ(Width)v5.0.0-alpha2新設

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

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

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

角丸の種類

画像に設定

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

二面に角丸

プレースホルダ75x75  上部が角丸:.rounded-topborder-top-left-radius: 0.375rem, border-top-right-radius: 0.375rem プレースホルダ75x75  行末側が角丸:.rounded-endborder-top-right-radius: 0.375rem, border-bottom-right-radius: 0.375remv5.0.0-beta1クラス名変更 プレースホルダ75x75  下部が角丸:.rounded-bottomborder-bottom-left-radius: 0.375rem, border-bottom-right-radius: 0.375rem プレースホルダ75x75  行頭側が角丸:.rounded-startborder-top-left-radius: 0.375rem, border-bottom-left-radius: 0.375remv5.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}) を入れる(.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.2.0クラス追加

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

大きさの種類
プレースホルダ75x75 角丸なし:.rounded-0border-radius: 0 小さめの角丸の画像75x75 小さめの角丸:.rounded-1border-radius: 0.25remv5.0.0-alpha3クラス名変更 デフォルトの角丸の画像75x75 標準の角丸:.rounded-2border-radius: 0.375remv5.0.0-alpha3追加※デフォルトでは .rounded と同じ 大きめの角丸の画像75x75 大きめの角丸:.rounded-3border-radius: 0.5remv5.0.0-alpha3クラス名変更 大きめの角丸の画像75x75 特大の角丸:.rounded-4border-radius: 1remv5.2.0追加 大きめの角丸の画像75x75 超特大の角丸:.rounded-5border-radius: 2remv5.2.0追加
設定例
<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 を追加
  • 【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) を追加

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