Borders

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

								
<span class="w-25 h-25 bg-light border"></span>
<span class="w-25 h-25 bg-light border-top"></span>
<span class="w-25 h-25 bg-light border-end"></span>
<span class="w-25 h-25 bg-light border-bottom"></span>
<span class="w-25 h-25 bg-light border-start"></span>
								
							
								
<span class="w-25 h-25 bg-light border border-0"></span>
<span class="w-25 h-25 bg-light border border-top-0"></span>
<span class="w-25 h-25 bg-light border border-end-0"></span>
<span class="w-25 h-25 bg-light border border-bottom-0"></span>
<span class="w-25 h-25 bg-light border border-start-0"></span>
								
							
								
<span class="w-25 h-25 bg-light border border-primary"></span>
<span class="w-25 h-25 bg-light border border-primary-subtle"></span>
<span class="w-25 h-25 bg-light border border-secondary"></span>
<span class="w-25 h-25 bg-light border border-secondary-subtle"></span>
<span class="w-25 h-25 bg-light border border-success"></span>
<span class="w-25 h-25 bg-light border border-success-subtle"></span>
<span class="w-25 h-25 bg-light border border-danger"></span>
<span class="w-25 h-25 bg-light border border-danger-subtle"></span>
<span class="w-25 h-25 bg-light border border-warning"></span>
<span class="w-25 h-25 bg-light border border-warning-subtle"></span>
<span class="w-25 h-25 bg-light border border-info"></span>
<span class="w-25 h-25 bg-light border border-info-subtle"></span>
<span class="w-25 h-25 bg-light border border-light"></span>
<span class="w-25 h-25 bg-light border border-light-subtle"></span>
<span class="w-25 h-25 bg-light border border-dark"></span>
<span class="w-25 h-25 bg-light border border-dark-subtle"></span>
<span class="w-25 h-25 bg-light border border-black"></span>
<span class="w-25 h-25 bg-light border border-white"></span>
								
							
								
<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>
								
							
This is default success border
This is 75% opacity success border
This is 50% opacity success border
This is 25% opacity success border
This is 10% opacity success border
								
<span class="w-25 h-25 bg-light border border-1"></span>
<span class="w-25 h-25 bg-light border border-2"></span>
<span class="w-25 h-25 bg-light border border-3"></span>
<span class="w-25 h-25 bg-light border border-4"></span>
<span class="w-25 h-25 bg-light border border-5"></span>
								
							
								
<img src="https://placehold.co/600x400" class="rounded" alt="...">
<img src="https://placehold.co/600x400" class="rounded-top" alt="...">
<img src="https://placehold.co/600x400" class="rounded-end" alt="...">
<img src="https://placehold.co/600x400" class="rounded-bottom" alt="...">
<img src="https://placehold.co/600x400" class="rounded-start" alt="...">
<img src="https://placehold.co/600x400" class="rounded-circle" alt="...">
<img src="https://placehold.co/600x400" class="rounded-pill" alt="...">
								
							
... ... ... ... ... ... ...
								
<img src="https://placehold.co/600x400" class="rounded-bottom-1" alt="...">
<img src="https://placehold.co/600x400" class="rounded-start-2" alt="...">
<img src="https://placehold.co/600x400" class="rounded-end-circle" alt="...">
<img src="https://placehold.co/600x400" class="rounded-start-pill" alt="...">
<img src="https://placehold.co/600x400" class="rounded-5 rounded-top-0" alt="...">
								
							
... ... ... ... ...

Already working together?

log in to your account and connect with your teammates!.