Skip to main content

Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Border Width

Add classes to an element to easily resize your border width.

Example Example Example Example Example Example 
            
              <img class="border border-0" src="..." alt="...">
              <img class="border border-1" src="..." alt="...">
              <img class="border border-2" src="..." alt="...">
              <img class="border border-3" src="..." alt="...">
              <img class="border border-4" src="..." alt="...">
              <img class="border border-5" src="..." alt="...">

Border Last child zero

Add right border to all child but last child zero value.

            
              <ul class="border-right-last-0">
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
              </ul>

Border First child zero

Add left border to all child but first child zero value.

            
              <ul class="border-left-first-0">
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
              </ul>

Border bottom last zero

Add border bottom to all child but last child zero value.

            
              <ul class="border-bottom-last-0">
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
              </ul>

Border top first zero

Add border top to all child but first child zero value.

            
              <ul class="border-top-first-0">
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
                <li class="..."><div class="..."></div></li>
              </ul>

See more border documentation in here