Border Style

Utilities for controlling the style of an element’s borders.

Use the border style utilities to change the style of an element’s borders.

Quick reference

.border-solidborder-style: solid;
.border-dashedborder-style: dashed;
.border-dottedborder-style: dotted;
.border-doubleborder-style: double;
.border-hiddenborder-style: hidden;
.border-noneborder-style: none;

Basic examples

Setting the border style

Use border-{style} to control an element’s border style.





<div class="border border-solid border-2 border-primary ..."></div>
<div class="border border-dashed border-2 border-primary ..."></div>
<div class="border border-dotted border-2 border-primary ..."></div>
<div class="border border-double border-4 border-primary ..."></div>

No style

Use border-none to remove an existing border style from an element. This is most commonly used to remove a border style that was applied at a smaller breakpoint.

  <button class="btn btn-outline-primary border-none">Save changes</button>