Borders

Bootstrap borders

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

Edit in sandbox 
        
            

        <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.

Edit in sandbox 
        
            

        <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.

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-radius

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

100x100 100x100 100x100 100x100 100x100 100x100 150x75 100x100
Edit in sandbox 
        
            

        <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.

100x100 100x100
Edit in sandbox 
        
            

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