Borders

Bootstrap borders

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

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


Border

You may 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

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

        
            

        <span class="border 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

Also, 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

Finally, you can add classes to an element to easily round its corners.

        
            

        <img src="..." alt="..." class="rounded mb-0">
        <img src="..." alt="..." class="rounded-top">
        <img src="..." alt="..." class="rounded-right">
        <img src="..." alt="..." class="rounded-bottom">
        <img src="..." alt="..." class="rounded-left">
        <img src="..." alt="..." class="rounded-circle">
        <img src="..." alt="..." class="rounded-pill">
        <img src="..." alt="..." class="rounded-0">

      
        
    

Sizes

Use .rounded-lg or .rounded-sm for larger or smaller border-radius.

        
            

        <img class="rounded-sm" alt="100x100" src="...">
        <img class="rounded-lg" alt="100x100" src="...">