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 flex flex-wrap md:justify-content-between justify-content-center">
    <div class="border-none border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-none</div>
    <div class="border-1 border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-1</div>
    <div class="border-2 border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-2</div>
    <div class="border-3 border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-3</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 flex flex-wrap md:justify-content-between justify-content-center">
    <div class="border-top-2 border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-top-2</div>
    <div class="border-right-2 border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-right-2</div>
    <div class="border-bottom-2 border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-bottom-2</div>
    <div class="border-left-2 border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-left-2</div>
</div>

border-x-2
border-y-2

<div class="card flex flex-wrap md:justify-content-start justify-content-center">
    <div class="border-x-2 border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-x-2</div>
    <div class="border-y-2 border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">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.

  • 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 flex flex-wrap md:justify-content-between justify-content-center">
    <div class="border-y-none border-x-2 md:border-x-none md:border-y-2 border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">Responsive Border</div>
</div>