Border Width

Utilities for controlling the width of an element's borders.

Live Editor
<>
  <div class="lil-flex">
    <div class="lil-border-sm lil-w-3/12 lil-m-2  lil-p-2 lil-bg-green-100">sm - 1px</div>
    <div class="lil-border-md lil-w-3/12 lil-m-2  lil-p-2 lil-bg-green-100">md - 2px</div>
    <div class="lil-border-lg lil-w-3/12 lil-m-2  lil-p-2 lil-bg-green-100">lg - 3px</div>
    <div class="lil-border-xl lil-w-3/12 lil-m-2  lil-p-2 lil-bg-green-100">xl - 4px</div>
  </div>
</>
<>
  <div class="lil-flex">
    <div class="lil-border-sm lil-w-3/12 lil-m-2  lil-p-2 lil-bg-green-100">sm - 1px</div>
    <div class="lil-border-md lil-w-3/12 lil-m-2  lil-p-2 lil-bg-green-100">md - 2px</div>
    <div class="lil-border-lg lil-w-3/12 lil-m-2  lil-p-2 lil-bg-green-100">lg - 3px</div>
    <div class="lil-border-xl lil-w-3/12 lil-m-2  lil-p-2 lil-bg-green-100">xl - 4px</div>
  </div>
</>
Result
sm - 1px
md - 2px
lg - 3px
xl - 4px

Border widths can also be applied to individual side by following the convention lil-border-{t|b|l|r}-{size}

Live Editor
<>
  <div class="lil-flex">
    <div class="lil-border-t-md lil-w-3/12 lil-m-2  lil-p-2 lil-bg-green-100">top border</div>
    <div class="lil-border-b-md lil-w-3/12 lil-m-2  lil-p-2 lil-bg-green-100">border bottom</div>
    <div class="lil-border-l-md lil-w-3/12 lil-m-2  lil-p-2 lil-bg-green-100">left border</div>
    <div class="lil-border-r-md lil-w-3/12 lil-m-2  lil-p-2 lil-bg-green-100">right border</div>
  </div>
</>
<>
  <div class="lil-flex">
    <div class="lil-border-t-md lil-w-3/12 lil-m-2  lil-p-2 lil-bg-green-100">top border</div>
    <div class="lil-border-b-md lil-w-3/12 lil-m-2  lil-p-2 lil-bg-green-100">border bottom</div>
    <div class="lil-border-l-md lil-w-3/12 lil-m-2  lil-p-2 lil-bg-green-100">left border</div>
    <div class="lil-border-r-md lil-w-3/12 lil-m-2  lil-p-2 lil-bg-green-100">right border</div>
  </div>
</>
Result
top border
border bottom
left border
right border