Overview

This is a border utility class added by extending Bootstrap Borders.

Border Styles

Use .border-dashed or .border-dotted classes to set an element's border style. For border directions use .border-{direction}-dashed or .border-{direction}-dotted classes format.

Where direction is one of:

top - for classes that set border top style
bottom - for classes that set border bottom style
end - for classes that set border right style
start - for classes that set border start style

default style

.border-dotted

.border-dashed

.border-bottom-dashed

.border-end-dashed

          <div class="border">default style</div>
<div class="border-gray-300 border-dotted">.border-dotted</div>
<div class="border-gray-300 border-dashed">.border-dashed</div>
<div class="border-gray-300 border-bottom-dashed">.border-bottom-dashed</div>
<div class="border-gray-300 border-end-dashed">.border-end-dashed</div>

Hover State

Use .border-hover to display an element's border on hover.

default

gray-500

primary

          <div class="border border-hover">default</div>
<div class="border border-gray-500 border-hover">gray-500</div>
<div class="border border-primary border-hover">primary</div>

Active State

Use .border-active to display an element's border when .active class applied.

default

gray-500

primary

          <div class="border border-active active">default</div>
<div class="border border-gray-500 border-active active">gray-500</div>
<div class="border border-primary border-active active">primary</div>

Transparent Border

Use .border-transparent to set an element's border color to tranparent.

tranparent
border

          <div class="border border-transparent">default</div>

Border Gray Colors

Use .border-gray-{100, 200, 300, 400, 500, 600, 700, 800, 900} to set an element's border color.

.border-gray-100

.border-gray-200

.border-gray-300

.border-gray-400

.border-gray-500

.border-gray-600

.border-gray-700

.border-gray-800

.border-gray-900