Border Width

DSpecifies the border width of an element.

Classes#

Class	Properties
border-none	border-width: 0px;
border-1	border-width: 1px;
border-2	border-width: 2px;
border-3	border-width: 3px;
border-x-none	border-right-width: 0px; border-left-width: 0px;
border-x-1	border-right-width: 1px; border-left-width: 1px;
border-x-2	border-right-width: 2px; border-left-width: 2px;
border-x-3	border-right-width: 3px; border-left-width: 3px;
border-y-none	border-top-width: 0px; border-bottom-width: 0px;
border-y-1	border-top-width: 1px; border-bottom-width: 1px;
border-y-2	border-top-width: 2px; border-bottom-width: 2px;
border-y-3	border-top-width: 3px; border-bottom-width: 3px;
border-top-none	border-top-width: 0px;
border-top-1	border-top-width: 1px;
border-top-2	border-top-width: 2px;
border-top-3	border-top-width: 3px;
border-left-none	border-left-width: 0px;
border-left-1	border-left-width: 1px;
border-left-2	border-left-width: 2px;
border-left-3	border-left-width: 3px;
border-bottom-none	border-bottom-width: 0px;
border-bottom-1	border-bottom-width: 1px;
border-bottom-2	border-bottom-width: 2px;
border-bottom-3	border-bottom-width: 3px;
border-right-none	border-right-width: 0px;
border-right-1	border-right-width: 1px;
border-right-2	border-right-width: 2px;
border-right-3	border-right-width: 3px;

All Sides#

Widths of a border can be defined for all edges at once.

border-none

border-1

border-2

border-3

<div class="flex flex-wrap md:justify-content-between justify-content-center">
    <div class="border-none w-12rem h-6rem m-2 surface-overlay font-bold flex align-items-center justify-content-center">border-none</div>
    <div class="border-1 border-primary-500 w-12rem h-6rem m-2 surface-overlay font-bold flex align-items-center justify-content-center">border-1</div>
    <div class="border-2 border-primary-500 w-12rem h-6rem m-2 surface-overlay font-bold flex align-items-center justify-content-center">border-2</div>
    <div class="border-3 border-primary-500 w-12rem h-6rem m-2 surface-overlay font-bold flex align-items-center justify-content-center">border-3</div>
</div>

Sepecific Sides#

Widths of a border can be defined per edge as well.

border-top-2

border-right-2

border-bottom-2

border-left-2

<div class="flex flex-wrap md:justify-content-between justify-content-center">
    <div class="border-top-2 border-primary-500 w-12rem h-6rem m-2 surface-overlay font-bold flex align-items-center justify-content-center">border-top-2</div>
    <div class="border-right-2 border-primary-500 w-12rem h-6rem m-2 surface-overlay font-bold flex align-items-center justify-content-center">border-right-2</div>
    <div class="border-bottom-2 border-primary-500 w-12rem h-6rem m-2 surface-overlay font-bold flex align-items-center justify-content-center">border-bottom-2</div>
    <div class="border-left-2 border-primary-500 w-12rem h-6rem m-2 surface-overlay font-bold flex align-items-center justify-content-center">border-left-2</div>
</div>

border-x-2

border-y-2

<div class="flex flex-wrap md:justify-content-start justify-content-center">
    <div class="border-x-2 border-primary-500 w-12rem h-6rem surface-overlay font-bold m-2 flex align-items-center justify-content-center">border-x-2</div>
    <div class="border-y-2 border-primary-500 w-12rem h-6rem surface-overlay font-bold m-2 flex align-items-center justify-content-center">border-y-2</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-2 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

Responsive Border

<div class="flex flex-wrap justify-content-center">
    <div class="border-y-none border-x-2 md:border-x-none md:border-y-2 border-primary-500 w-12rem h-6rem surface-overlay font-bold m-2 flex align-items-center justify-content-center">Responsive Border</div>
</div>