Bootstrap Borders
Border utility classes let you add or remove borders and control their color and roundness without custom CSS. The base .border class adds a thin gray border on all sides.
You can target individual sides with .border-top, .border-end, etc., remove borders with .border-0, and add rounded corners with .rounded or .rounded-circle.
<div class="border border-primary rounded p-3">...</div>Adding and removing borders
.border adds a border to all sides. .border-top, .border-bottom, .border-start, and .border-end add a border to just one side. .border-0 removes all borders.
Border color and radius
Add .border-{color} like .border-danger to color the border. Add .rounded, .rounded-top, or .rounded-circle to control corner roundness.
<div class="border border-success rounded p-3 mb-2">Bordered box</div>
<div class="border-0 shadow-sm p-3">No border, just a shadow</div>A rounded green-bordered box, followed by a borderless box with a soft shadowborder-success colors the border green, rounded softens the corners, and border-0 removes the border entirely on the second box.
<img src="https://via.placeholder.com/100" class="rounded-circle border border-3 border-dark" alt="Avatar">A circular image with a thick dark border around itborder-3 increases the border thickness, and rounded-circle combined with it creates a framed avatar look.
Key points
- .border adds a border on all sides; .border-0 removes it.
- Side-specific classes like .border-top add a border to one side only.
- .border-{color} sets the border's color.
- .rounded and .rounded-circle control corner roundness.