SE学院
Contact

Borderの使い方

Cheat sheet

各項目を選ぶことで、任意の境界線を作成できます。

Border
Border style
Border color
Border radius

HTML

<div class="border p-1">
Border
</div>

サンプル

Border

Border

<div class="border">.border</div>
.border
.border-top
.border-right
.border-bottom
.border-left
.border-x
.border-y

Border style

<div class="border border-dashed">.border .border-dashed</div>
.border .border-dashed

Border color

<div class="border border-blue">.border</div>
.border .border-blue
.border .border-blue-light
.border .border-green
.border .border-green-light
.border .border-red
.border .border-red-light
.border .border-purple
.border .border-yellow
.border .border-gray-light
.border .border-gray-dark

Border radius

<div class="border rounded-1">.border .rounded-1</div>
.border .rounded-1
<div class="border rounded-top-1">.border .rounded-top-1</div>
.border .rounded-top-1
<div class="border rounded-right-1">.border .rounded-right-1</div>
.border .rounded-right-1
<div class="border rounded-bottom-1">.border .rounded-bottom-1</div>
.border .rounded-bottom-1
<div class="border rounded-left-1">.border .rounded-left-1</div>
.border .rounded-left-1
<div class="border rounded-2">.border .rounded-2</div>
.border .rounded-2
<div class="border rounded-top-2">.border .rounded-top-2</div>
.border .rounded-top-2
<div class="border rounded-right-2">.border .rounded-right-2</div>
.border .rounded-right-2
<div class="border rounded-bottom-2">.border .rounded-bottom-2</div>
.border .rounded-bottom-2
<div class="border rounded-left-2">.border .rounded-left-2</div>
.border .rounded-left-2