Borders
Utilities for controlling the style of an element's borders.
| Class | Styles |
|---|---|
border-solid | border-style: solid; |
border-dashed | border-style: dashed; |
border-dotted | border-style: dotted; |
border-double | border-style: double; |
border-hidden | border-style: hidden; |
border-none | border-style: none; |
divide-solid | & > :not(:last-child) { border-style: solid;} |
divide-dashed | & > :not(:last-child) { border-style: dashed;} |
divide-dotted | & > :not(:last-child) { border-style: dotted;} |
divide-double | & > :not(:last-child) { border-style: double;} |
divide-hidden | & > :not(:last-child) { border-style: hidden;} |
divide-none | & > :not(:last-child) { border-style: none;} |
Use utilities likeborder-solid andborder-dotted to control an element's border style:
border-solid
border-dashed
border-dotted
border-double
<div class="border-2border-solid ..."></div><div class="border-2border-dashed ..."></div><div class="border-2border-dotted ..."></div><div class="border-4border-double ..."></div>Use theborder-none utility to remove an existing border from an element:
<button class="border-none ...">Save Changes</button>This is most commonly used to remove a border style that was applied at a smaller breakpoint.
Use utilities likedivide-dashed anddivide-dotted to control the border style between child elements:
<div class="grid grid-cols-3 divide-x-3divide-dashed divide-indigo-500"> <div>01</div> <div>02</div> <div>03</div></div>Prefix aborder-style utility with a breakpoint variant likemd: to only apply the utility at medium screen sizes and above:
<div class="border-solidmd:border-dotted ..."> <!-- ... --></div>Learn more about using variants in thevariants documentation.