Borders

Bootstrap 5 Borders

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

Basic examples

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

Additive

Additive classes are used to add borders.

Edit in sandbox 
        
            
            <span class="border"></span>
            <span class="border-top"></span>
            <span class="border-end"></span>
            <span class="border-bottom"></span>
            <span class="border-start"></span>

Subtractive

Subtractive classes are used to remove borders.

Edit in sandbox 
        
            
            <span class="border border-0"></span>
            <span class="border border-top-0"></span>
            <span class="border border-end-0"></span>
            <span class="border border-bottom-0"></span>
            <span class="border border-start-0"></span>

Color

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

Edit in sandbox 
        
            
          <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>
          <span class="border border-white"></span>

Border-width

Edit in sandbox 
        
            

            <span class="border border-1"></span>
            <span class="border border-2"></span>
            <span class="border border-3"></span>
            <span class="border border-4"></span>
            <span class="border border-5"></span>

Border-radius

Add classes to an element to easily round its corners.

Edit in sandbox 
        
            
          <img src="..." class="rounded" alt="..." />
          <img src="..." class="rounded-top" alt="..." />
          <img src="..." class="rounded-end" alt="..." />
          <img src="..." class="rounded-bottom" alt="..." />
          <img src="..." class="rounded-start" alt="..." />
          <img src="..." class="rounded-circle" alt="..." />
          <img src="..." class="rounded-pill" alt="..." />
          <img src="..." class="rounded-0" alt="..." />

Sizes

Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 9, and can be configured by modifying the utilities API.

Edit in sandbox 
        
            
            
              <!-- border-radius: 0px; -->
              <img src="..." class="rounded-0" alt="...">

              <!-- border-radius: .2rem; -->
              <img src="..." class="rounded-1" alt="...">

              <!-- border-radius: .25rem; -->
              <img src="..." class="rounded-2" alt="...">

              <!-- border-radius: .3rem; -->
              <img src="..." class="rounded-3" alt="...">

              <!-- border-radius: .375rem; -->
              <img src="..." class="rounded-4" alt="...">

              <!-- border-radius: .5rem; -->
              <img src="..." class="rounded-5" alt="...">

              <!-- border-radius: .75rem; -->
              <img src="..." class="rounded-6" alt="...">

              <!-- border-radius: .1rem; -->
              <img src="..." class="rounded-7" alt="...">

              <!-- border-radius: 1.25rem; -->
              <img src="..." class="rounded-8" alt="...">

              <!-- border-radius: 1.5rem; -->
              <img src="..." class="rounded-9" alt="...">