⌘ K
esc

    Border Width

    Specifies 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="card">
        <div class="flex flex-wrap md:justify-content-between justify-content-center card-container blue-container">
            <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-blue-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-blue-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-blue-500 w-12rem h-6rem m-2 surface-overlay font-bold flex align-items-center justify-content-center">border-3</div>
        </div>
    </div>
    
    
    Specific 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="card">
        <div class="flex flex-wrap md:justify-content-between justify-content-center card-container yellow-container">
            <div class="border-top-2 border-yellow-500 w-12rem h-6rem surface-overlay font-bold m-2 flex align-items-center justify-content-center">border-top-2</div>
            <div class="border-right-2 border-yellow-500 w-12rem h-6rem surface-overlay font-bold m-2 flex align-items-center justify-content-center">border-right-2</div>
            <div class="border-bottom-2 border-yellow-500 w-12rem h-6rem surface-overlay font-bold m-2 flex align-items-center justify-content-center">border-bottom-2</div>
            <div class="border-left-2 border-yellow-500 w-12rem h-6rem surface-overlay font-bold m-2 flex align-items-center justify-content-center">border-left-2</div>
        </div>
    </div>
    
    
    border-x-2
    border-y-2
    
    <div class="card">
        <div class="flex flex-wrap md:justify-content-start justify-content-center card-container green-container">
            <div class="border-x-2 border-green-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-green-500 w-12rem h-6rem surface-overlay font-bold m-2 flex align-items-center justify-content-center">border-y-2</div>
        </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.

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