.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>