Border Style

Controls the style of a border.

Classes
Class Properties
border-solid border-style: solid;
border-dashed border-style: dashed
border-dotted border-style: dotted;
border-double border-style: double;
Examples
border-solid
border-dashed
border-dotted
border-double

<div class="card flex flex-wrap md:justify-content-between justify-content-center">
    <div class="border-solid border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-solid</div>
    <div class="border-dashed border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-dashed</div>
    <div class="border-dotted border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-dotted</div>
    <div class="border-double border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-double</div>
</div>

Responsive

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.

  • 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="card flex flex-wrap md:justify-content-between justify-content-center">
    <div class="border-dashed md:border-solid border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">Responsive Border Style</div>
</div>