GitHubで表示

ボーダー

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

境界

ボーダーユーティリティを使用して、要素の境界を追加または削除します。すべての境界から、または一度に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="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-right" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-left" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">
<img src="..." class="rounded-0" alt="...">

サイズ

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

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