Source

国境

ボーダー ユーティリティを使用して、要素のボーダーとボーダー半径をすばやくスタイル設定します。画像、ボタン、またはその他の要素に最適です。

国境

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

添加剤

<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

減法

<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>

ボーダの色

テーマの色に基づいて構築されたユーティリティを使用して、境界線の色を変更します。

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

境界半径

角を簡単に丸めるには、要素にクラスを追加します。

Example rounded image 75x75 Example top rounded image 75x75 Example right rounded image 75x75 Example bottom rounded image 75x75 Example left rounded image 75x75 Completely round image 75x75 Rounded pill image 150x75 Example non-rounded image (overrides rounding applied elsewhere) 75x75 
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-pill">
<img src="..." alt="..." class="rounded-0">

サイズ

境界半径を大きくまたは小さくするには.rounded-lg、またはを使用します。.rounded-sm

Example small rounded image 75x75 Example large rounded image 75x75 
<img src="..." alt="..." class="rounded-sm">
<img src="..." alt="..." class="rounded-lg">