Border widths

Customize border width easily.

<!-- Source -->
<p class="border-1">1px</p>
<p class="border-top-1">1px</p>
<p class="border-right-1">1px</p>
<p class="border-bottom-1">1px</p>
<p class="border-left-1">1px</p>

<p class="border-2">2px</p>
<p class="border-top-2">2px</p>
<p class="border-right-2">2px</p>
<p class="border-bottom-2">2px</p>
<p class="border-left-2">2px</p>

<p class="border-3">3px</p>
<p class="border-top-3">3px</p>
<p class="border-right-3">3px</p>
<p class="border-bottom-3">3px</p>
<p class="border-left-3">3px</p>

<p class="border-4">4px</p>
<p class="border-top-4">4px</p>
<p class="border-right-4">4px</p>
<p class="border-bottom-4">4px</p>
<p class="border-left-4">4px</p>

<p class="border-5">5px</p>
<p class="border-top-5">5px</p>
<p class="border-right-5">5px</p>
<p class="border-bottom-5">5px</p>
<p class="border-left-5">5px</p>

Responsive

<!-- Responsive -->
<p class="border-sm-0">0px</p>
<p class="border-top-sm-0">0px</p>
<p class="border-right-sm-0">0px</p>
<p class="border-bottom-sm-0">0px</p>
<p class="border-left-sm-0">0px</p>

<p class="border-sm-1">1px</p>
<p class="border-top-sm-1">1px</p>
<p class="border-right-sm-1">1px</p>
<p class="border-bottom-sm-1">1px</p>
<p class="border-left-sm-1">1px</p>

<p class="border-sm-2">2px</p>
<p class="border-top-sm-2">2px</p>
<p class="border-right-sm-2">2px</p>
<p class="border-bottom-sm-2">2px</p>
<p class="border-left-sm-2">2px</p>

<p class="border-sm-3">3px</p>
<p class="border-top-sm-3">3px</p>
<p class="border-right-sm-3">3px</p>
<p class="border-bottom-sm-3">3px</p>
<p class="border-left-sm-3">3px</p>

<p class="border-sm-4">4px</p>
<p class="border-top-sm-4">4px</p>
<p class="border-right-sm-4">4px</p>
<p class="border-bottom-sm-4">4px</p>
<p class="border-left-sm-4">4px</p>

<p class="border-sm-5">5px</p>
<p class="border-top-sm-5">5px</p>
<p class="border-right-sm-5">5px</p>
<p class="border-bottom-sm-5">5px</p>
<p class="border-left-sm-5">5px</p>

<p class="border-md-0">0px</p>
<p class="border-top-md-0">0px</p>
<p class="border-right-md-0">0px</p>
<p class="border-bottom-md-0">0px</p>
<p class="border-left-md-0">0px</p>

<p class="border-md-1">1px</p>
<p class="border-top-md-1">1px</p>
<p class="border-right-md-1">1px</p>
<p class="border-bottom-md-1">1px</p>
<p class="border-left-md-1">1px</p>

<p class="border-md-2">2px</p>
<p class="border-top-md-2">2px</p>
<p class="border-right-md-2">2px</p>
<p class="border-bottom-md-2">2px</p>
<p class="border-left-md-2">2px</p>

<p class="border-md-3">3px</p>
<p class="border-top-md-3">3px</p>
<p class="border-right-md-3">3px</p>
<p class="border-bottom-md-3">3px</p>
<p class="border-left-md-3">3px</p>

<p class="border-md-4">4px</p>
<p class="border-top-md-4">4px</p>
<p class="border-right-md-4">4px</p>
<p class="border-bottom-md-4">4px</p>
<p class="border-left-md-4">4px</p>

<p class="border-md-5">5px</p>
<p class="border-top-md-5">5px</p>
<p class="border-right-md-5">5px</p>
<p class="border-bottom-md-5">5px</p>
<p class="border-left-md-5">5px</p>

<p class="border-lg-0">0px</p>
<p class="border-top-lg-0">0px</p>
<p class="border-right-lg-0">0px</p>
<p class="border-bottom-lg-0">0px</p>
<p class="border-left-lg-0">0px</p>

<p class="border-lg-1">1px</p>
<p class="border-top-lg-1">1px</p>
<p class="border-right-lg-1">1px</p>
<p class="border-bottom-lg-1">1px</p>
<p class="border-left-lg-1">1px</p>

<p class="border-lg-2">2px</p>
<p class="border-top-lg-2">2px</p>
<p class="border-right-lg-2">2px</p>
<p class="border-bottom-lg-2">2px</p>
<p class="border-left-lg-2">2px</p>

<p class="border-lg-3">3px</p>
<p class="border-top-lg-3">3px</p>
<p class="border-right-lg-3">3px</p>
<p class="border-bottom-lg-3">3px</p>
<p class="border-left-lg-3">3px</p>

<p class="border-lg-4">4px</p>
<p class="border-top-lg-4">4px</p>
<p class="border-right-lg-4">4px</p>
<p class="border-bottom-lg-4">4px</p>
<p class="border-left-lg-4">4px</p>

<p class="border-lg-5">5px</p>
<p class="border-top-lg-5">5px</p>
<p class="border-right-lg-5">5px</p>
<p class="border-bottom-lg-5">5px</p>
<p class="border-left-lg-5">5px</p>

<p class="border-xl-0">0px</p>
<p class="border-top-xl-0">0px</p>
<p class="border-right-xl-0">0px</p>
<p class="border-bottom-xl-0">0px</p>
<p class="border-left-xl-0">0px</p>

<p class="border-xl-1">1px</p>
<p class="border-top-xl-1">1px</p>
<p class="border-right-xl-1">1px</p>
<p class="border-bottom-xl-1">1px</p>
<p class="border-left-xl-1">1px</p>

<p class="border-xl-2">2px</p>
<p class="border-top-xl-2">2px</p>
<p class="border-right-xl-2">2px</p>
<p class="border-bottom-xl-2">2px</p>
<p class="border-left-xl-2">2px</p>

<p class="border-xl-3">3px</p>
<p class="border-top-xl-3">3px</p>
<p class="border-right-xl-3">3px</p>
<p class="border-bottom-xl-3">3px</p>
<p class="border-left-xl-3">3px</p>

<p class="border-xl-4">4px</p>
<p class="border-top-xl-4">4px</p>
<p class="border-right-xl-4">4px</p>
<p class="border-bottom-xl-4">4px</p>
<p class="border-left-xl-4">4px</p>

<p class="border-xl-5">5px</p>
<p class="border-top-xl-5">5px</p>
<p class="border-right-xl-5">5px</p>
<p class="border-bottom-xl-5">5px</p>
<p class="border-left-xl-5">5px</p>