Border Style

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

Contents

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

Quick reference

Class	Properties
`.border-solid`	border-style: solid;
`.border-dashed`	border-style: dashed;
`.border-dotted`	border-style: dotted;
`.border-double`	border-style: double;
`.border-hidden`	border-style: hidden;
`.border-none`	border-style: none;

Basic examples

Setting the border style

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

border-solid

border-dashed

border-dotted

border-double

<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.