Border Style

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

Quick reference

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>