Borders

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

Border

Use border utilities to add or remove an element’s borders. 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>

Style 

                    
                      <span class="border"></span>
                      <span class="border-dashed"></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>
                      <span class="border border-white"></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 pilled image Example non-rounded image (overrides rounding applied elsewhere) 
                    
                      <img class="rounded" src="..." alt="...">
                      <img class="rounded-top" src="..." alt="...">
                      <img class="rounded-right" src="..." alt="...">
                      <img class="rounded-bottom" src="..." alt="...">
                      <img class="rounded-left" src="..." alt="...">
                      <img class="rounded-circle" src="..." alt="...">
                      <img class="rounded-pill" src="..." alt="...">
                      <img class="rounded-0" src="..." alt="...">
                      <div class="bg-img-hero gradient-x-overlay-sm-dark rounded-pseudo" style="background-image: url(../assets/img/900x450/img1.jpg);"></div>
                      <div class="bg-img-hero gradient-x-overlay-sm-dark rounded-lg-pseudo" style="background-image: url(../assets/img/900x450/img1.jpg);"></div>

Important

.rounded-pseudo border radius class used on top of images that are overlayed with background gradients.