Borders

You can use border utilities for quick styling of border and border-radius of an element. They are great for images, buttons or any other elements.

Border

You can use border utilities to add or remove an element’s borders. For that you should choose from all borders or one at a time.

Additive 


  <span class="border"></span>
  <span class="border-top"></span>
  <span class="border-right"></span>
  <span class="border-bottom"></span>
  <span class="border-left"></span>

Subtractive 


  <span class="border-0"></span>
  <span class="border border-top-0"></span>
  <span class="border border-right-0"></span>
  <span class="border border-bottom-0"></span>
  <span class="border border-left-0"></span>

Border color

Change the border color using utilities built on our theme colors.


  <span class="border border-primary"></span>
  <span class="border border-secondary"></span>
  <span class="border border-success"></span>
  <span class="border border-danger"></span>
  <span class="border border-warning"></span>
  <span class="border border-info"></span>
  <span class="border border-light"></span>
  <span class="border border-dark"></span>

Border radius

Add classes to an element to easily round its corners.

Example rounded image Example top rounded image Example right rounded image Example bottom rounded image Example left rounded image Completely round image Example non-rounded image (overrides rounding applied elsewhere) Example top pilled image Example right pilled image Example bottom pilled image Example left pilled image Example top left pilled image Example bottom left pilled image 

  <img src="img/avatar-1.jpg" class="rounded" alt="...">

  <img src="img/avatar-1.jpg" class="rounded-top" alt="...">
  <img src="img/avatar-1.jpg" class="rounded-right" alt="...">
  <img src="img/avatar-1.jpg" class="rounded-bottom" alt="...">
  <img src="img/avatar-1.jpg" class="rounded-left" alt="...">

  <img src="img/avatar-1.jpg" class="rounded-circle" alt="...">

  <img src="img/avatar-1.jpg" class="rounded-0" alt="...">

  <img src="img/avatar-1.jpg" class="rounded-top-pill" alt="...">
  <img src="img/avatar-1.jpg" class="rounded-right-pill" alt="...">
  <img src="img/avatar-1.jpg" class="rounded-bottom-pill" alt="...">
  <img src="img/avatar-1.jpg" class="rounded-left-pill" alt="...">

  <img src="img/avatar-1.jpg" class="rounded-top-left-pill" alt="...">
  <img src="img/avatar-1.jpg" class="rounded-bottom-left-pill" alt="...">