Borders

Border utility is used to quickly change the border-style and border-radius of an element. It is mainly used for images, buttons, or any other element.

You can use the border classes to an element to remove all borders or some borders.

Syntax:

For no border:

<span class="border-0"></span>  

To remove top-border:

<span class="border-top-0"></span>  

To remove right-border:

<span class="border-right-0"></span>  

To remove bottom-border:

<span class="border-bottom-0"></span>  

To remove left-border:

<span class="border-left-0"></span>  

Border Radius

You can make the radius of the border in different shapes. Use the following classes to an element to easily round its corner.

Syntax:

To Round complete border:

<img src="..." alt="..." class="rounded">   

To round top-border:

<img src="..." alt="..." class="rounded-top">  

To round right-border:

<img src="..." alt="..." class="rounded-right">  

To round bottom-border:

<img src="..." alt="..." class="rounded-bottom">  

To round left-border:

<img src="..." alt="..." class="rounded-left">  

To round in circle:

<img src="..." alt="..." class="rounded-circle">  

No round:

<img src="..." alt="..." class="rounded-0">