Borders
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
Border
<p>The classes are named using the format <code>border-{side}</code> for <code>xs</code> and <code>{breakpoint}:border-{side}</code> for <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, and <code>xxl</code>.</p>
<p>Where<em> side</em> is one of:</p>
<ul>
<li><code>t</code> - for classes that set style for <code>border-top</code></li>
<li><code>b</code> - for classes that set style for <code>border-bottom</code></li>
<li><code>s</code> - for classes that set style for <code>border-start</code></li>
<li><code>e</code> - for classes that set style for <code>border-right</code></li>
<li><code>x</code> - for classes that set both<code>*-left</code> and <code>*-right</code></li>
<li><code>y</code> - for classes that set both<code>*-top</code> and <code>*-bottom</code></li>
<li>blank - for classes that set the<code>border</code> style on all 4 side of the element.</li>
</ul>
<p class="mb-0">Use border utilities to quickly style the <code>border</code> of an element. Great for images, buttons, or any other element.</p>The classes are named using the format border-{side} for xs and {breakpoint}:border-{side} for sm, md, lg, xl, and xxl.
Where side is one of:
t- for classes that set style forborder-topb- for classes that set style forborder-bottoms- for classes that set style forborder-starte- for classes that set style forborder-rightx- for classes that set both*-leftand*-righty- for classes that set both*-topand*-bottom- blank - for classes that set the
borderstyle on all 4 side of the element.
Use border utilities to quickly style the border of an element. Great for images, buttons, or any other element.
Additive
<span class="border"></span>
<span class="border-t"></span>
<span class="border-e"></span>
<span class="border-b"></span>
<span class="border-s"></span>Subtractive
<span class="border border-0"></span>
<span class="border border-t-0"></span>
<span class="border border-e-0"></span>
<span class="border border-b-0"></span>
<span class="border border-s-0"></span>Border Color
Change the border color using utilities built on our theme colors. The most used border colors utility class of this themes are .border and .border-translucent.
<span class="border border-info"></span>
<span class="border border-success"></span>
<span class="border border-warning"></span>
<span class="border border-danger"></span>
<div class="w-full"></div>
<span class="border border-black"></span>
<span class="border border-dark"></span>
<span class="border border-gray-1100"></span>
<span class="border border-gray-1000"></span>
<span class="border border-gray-900"></span>
<span class="border border-gray-800"></span>
<span class="border border-gray-700"></span>
<span class="border border-gray-600"></span>
<span class="border border-gray-500"></span>
<span class="border border-gray-400"></span>
<span class="border"></span>
<span class="border border-translucent"></span>
<span class="border border-gray-100"></span>
<span class="border border-light"></span>
<span class="border border-white"></span>
<span class="border border-2"></span>
<span class="border-t border-t-2"></span>
<span class="border-e border-e-2"></span>
<span class="border-b border-b-2"></span>
<span class="border-s border-s-2"></span>Border Width
You can control border width using helper classes border-{1|2|3|4|5}. In addition, you can also use border-top-2, border-end-2, border-bottom-2, border-start-2
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>
<hr />
<span class="border border-top-2"></span>
<span class="border border-end-2"></span>
<span class="border border-bottom-2"></span>
<span class="border border-start-2"></span>Border Radius
Add classes to an element to easily round its corners.
<span class="rounded-none"></span>
<span class="rounded-sm"></span>
<span class="rounded-md"></span>
<span class="rounded-lg"></span>
<span class="rounded-2xl"></span>
<span class="rounded-4xl"></span>
<span class="rounded-full"></span>
<span class="rounded-full w-37.5! h-18.75!"></span>Border Sizes
Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 3, and can be configured by modifying the utilities API.
<span class="md:rounded-t"></span>
<span class="lg:rounded-t"></span>
<span class="md:rounded-e"></span>
<span class="lg:rounded-e"></span>
<span class="md:rounded-b"></span>
<span class="lg:rounded-b"></span>
<span class="md:rounded-s"></span>
<span class="lg:rounded-s"></span>
