とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > ボーダー

ボーダー

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

Sample
All
Top
Right
Bottom
Left
Code
<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 は、ボーダーを非表示にします。

Sample
All
Top
Right
Bottom
Left
Code
<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-* はボーダーの色を指定します。

Sample
Primary
Secondary
Sccess
Danger
Waring
Info
Light
Dark
White
Code
<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} は要素の角を丸くします。

Sample
All
Top
Right
Bottom
Left
Circle
Pill
None
Code
<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>

Copyright (C) 2015-2019 杜甫々
初版:2015年9月6日 最終更新:2019年1月6日
http://www.tohoho-web.com/bootstrap/borders.html