とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. ボーダー

ボーダー

.border, .border-{top|right|bottom|left} は、ボーダーを表示します。

<div class="border">All</div>
<div class="border-top">Top</div>
<div class="border-right">Right</div>
<div class="border-bottom">Bottom</div>
<div class="border-left">Left</div>

ボーダー非表示

.border-0, .border-{top|right|bottom|left}-0 は、ボーダーを非表示にします。

<div class="border border-0">All</div>
<div class="border border-top-0">Top</div>
<div class="border border-right-0">Right</div>
<div class="border border-bottom-0">Bottom</div>
<div class="border border-left-0">Left</div>

ボーダーカラー

.border-* はボーダーの色を指定します。

<div class="border border-primary">Primary</div>
<div class="border border-secondary">Secondary</div>
<div class="border border-success">Success</div>
<div class="border border-danger">Danger</div>
<div class="border border-warning">Warning</div>
<div class="border border-info">Info</div>
<div class="border border-light">Light</div>
<div class="border border-dark">Dark</div>
<div class="border border-white">White</div>

丸角

.rounded, .rounded-{xxx} は要素の角を丸くします。

<div class="rounded">All</div>
<div class="rounded-top">Top</div>
<div class="rounded-right">Right</div>
<div class="rounded-bottom">Bottom</div>
<div class="rounded-left">Left</div>
<div class="rounded-circle">Circle</div>
<div class="rounded-pill">Pill</div>
<div class="rounded-0">None</div>