Controls the style of a border.
| Class | Properties |
|---|---|
| border-solid | border-style: solid; |
| border-dashed | border-style: dashed |
| border-dotted | border-style: dotted; |
| border-double | border-style: 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.
| Class | Description |
|---|---|
| sm: | small screens e.g. phones |
| md: | medium screens e.g. tablets |
| lg: | large screens e.g. notebooks |
| xl: | larger screens e.g monitors |
<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>