BS5 Borders & Shadows

Basic borders

<div class="border p-3">Border</div>
<div class="border-top p-3">Top border</div>
<div class="border-0 p-3">No border</div>

Border colors

<div class="border border-primary p-3">Primary</div>
<div class="border border-success p-3">Success</div>
<div class="border border-danger p-3">Danger</div>

Border width

<div class="border border-2 p-3">Border 2</div>
<div class="border border-3 p-3">Border 3</div>

Rounded corners

rounded
rounded-0
rounded-1
rounded-2
rounded-3
rounded-circle
rounded-pill

Rounded examples

<div class="bg-light border rounded p-3">Rounded box</div>
<img src="avatar.jpg" class="rounded-circle" alt="...">

Shadows

shadow-none
shadow-sm
shadow
shadow-lg

Shadow examples

<div class="p-3 bg-white border shadow-sm">Soft shadow</div>
<div class="p-3 bg-white border shadow">Normal shadow</div>

Best practices

• Use subtle borders and shadows for separation
• Avoid heavy shadows on dense layouts
• Keep radius consistent across components