Elements logo

Border style

Utilities for controlling the style of an element's borders

Class reference

ClassProperties
border-solidborder-style: solid;
border-dashedborder-style: dashed;
border-dottedborder-style: dotted;
border-doubleborder-style: double;
border-noneborder-style: none;

Usage

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

.border-solid
.border-dashed
.border-dotted
.border-double
.border-none
<div class="border-solid border-4 border-violet-400 ..."></div>
<div class="border-dashed border-4 border-violet-400 ..."></div>
<div class="border-dotted border-4 border-violet-400 ..."></div>
<div class="border-double border-4 border-violet-400 ..."></div>
<div class="border-none border-4 border-violet-400 ..."></div>

Responsive

To control the border style of an element at a specific breakpoint, add a {screen}: prefix to any existing border style utility. For example, use md:border-dotted to apply the border-dotted utility at only medium screen sizes and above.

<div class="border-solid **md:border-dotted** ..."></div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.