Border style

Utilities for controlling the style of an element's borders

Class reference

border-solidborder-style: solid;

border-dashedborder-style: dashed;

border-dottedborder-style: dotted;

border-doubleborder-style: double;

border-noneborder-style: none;


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

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


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.