⌘ K
esc

    Border Style

    Controls the style of a border.

    Classes
    Class Properties
    border-solid border-style: solid;
    border-dashed border-style: dashed
    border-dotted border-style: dotted;
    border-double border-style: double;
    Examples
    border-solid
    border-dashed
    border-dotted
    border-double
    
    <div class="card">
        <div class="flex flex-wrap md:justify-content-between justify-content-center card-container blue-container">
            <div class="border-solid border-blue-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-blue-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-blue-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-blue-500 w-12rem h-6rem m-2 surface-overlay font-bold flex align-items-center justify-content-center">border-double</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-dashed 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 Style
    
    <div class="card flex flex-wrap md:justify-content-between justify-content-center">
        <div class="border-dashed md:border-solid border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">Responsive Border Style</div>
    </div>