Edit these docs Rate these docs

Angular Bootstrap Borders

Angular borders - Bootstrap 4 & Material Design

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


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


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



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>



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

100x100 100x100 100x100 100x100 100x100 100x100 100x100 100x100

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



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

100x100 100x100

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


Streaming now live

"Coding Basics" - free educational webinar for your quarantaine.