Borders & Shadows in Bootstrap
From the Bootstrap 5 cheat sheet · Utilities · verified Jul 2026
Borders & Shadows
Border and shadow utilities
html
<!-- Borders -->
<div class="border">All borders</div>
<div class="border-top">Top border</div>
<div class="border-end">End border</div>
<div class="border-bottom">Bottom border</div>
<div class="border-start">Start border</div>
<!-- Border Colors -->
<div class="border border-primary">Primary</div>
<div class="border border-danger">Danger</div>
<!-- Border Width -->
<div class="border border-1">1px</div>
<div class="border border-2">2px</div>
<div class="border border-3">3px</div>
<!-- Rounded Corners -->
<div class="rounded">Rounded</div>
<div class="rounded-circle">Circle</div>
<div class="rounded-pill">Pill</div>
<div class="rounded-0">No rounding</div>💡 rounded-circle requires equal width/height for perfect circle
⚡ Combine border utilities for custom styles
📌 shadow-* utilities add depth to elements
🔥 border-0 removes default borders from elements