Border Style

Controls the style of a border.

bordercolor
ClassProperties
border-solidborder-style: solid;
border-dashedborder-style: dashed
border-dottedborder-style: dotted;
border-doubleborder-style: double;
border-solid
border-dashed
border-dotted
border-double
<div class="flex flex-wrap md:justify-content-between justify-content-center">
    <div class="border-solid border-primary-500 w-12rem h-6rem m-2 surface-overlay font-bold flex align-items-center justify-content-center">border-solid</div>
    <div class="border-dashed border-primary-500 w-12rem h-6rem m-2 surface-overlay font-bold flex align-items-center justify-content-center">border-dashed</div>
    <div class="border-dotted border-primary-500 w-12rem h-6rem m-2 surface-overlay font-bold flex align-items-center justify-content-center">border-dotted</div>
    <div class="border-double border-primary-500 w-12rem h-6rem m-2 surface-overlay font-bold flex align-items-center justify-content-center">border-double</div>
</div>
 

Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:border-dashed to use a responsive class.

ClassDescription
sm:small screens e.g. phones
md:medium screens e.g. tablets
lg:large screens e.g. notebooks
xl:larger screens e.g monitors
Responsive Border Style
<div class="flex flex-wrap justify-content-center">
    <div class="border-dashed md:border-solid border-primary-500 w-15rem h-6rem m-2 surface-overlay font-bold flex align-items-center justify-content-center">Responsive Border Style</div>
</div>