Bootstrap includes a robust set of utility classes designed to quickly style HTML borders without writing custom CSS. You can add borders to specific sides, change border colors dynamically, and round the sharp corners of any element instantly.
To add a standard 1px solid gray border around an entire element, use the .border class. If you only want a border on a specific edge, append the directional abbreviation (top, bottom, start, end).
<!-- Border on all sides -->
<div class="border"></div>
<!-- Borders on specific edges -->
<div class="border-top"></div>
<div class="border-end"></div>
<div class="border-bottom"></div>
<div class="border-start"></div>If an element natively has a border (like an input field, table, or card) and you want to remove it, you can use the subtractive `0` class: .border-0 to remove all boundaries, or .border-top-0 to clear just the top edge.
You can instantly change the color of a border by applying standard Bootstrap theme colors over top of the .border addition class.
<!-- You MUST declare .border first to actually draw the line, then add the color! -->
<div class="border border-primary"></div>
<div class="border border-success"></div>
<div class="border border-danger"></div>Bootstrap provides utility classes to soften the sharp, square 90-degree corners of HTML elements. You can control the aggressiveness of the curve, or manipulate the element into perfect circles and pills.
<!-- Standard sizes 0 through 5 -->
<div class="rounded-1">Slight curve</div>
<div class="rounded-5">Major curve</div>
<!-- Shape generators -->
<div class="rounded-circle">Perfect Circle</div>
<div class="rounded-pill">Lozenges/Pill Shape</div>Similar to standard borders, you can target exact corners utilizing directional classes like .rounded-top, .rounded-end, .rounded-bottom, or .rounded-start!
.border-primary alone sets a color that has nothing to show — you need .border to actually draw a 1px line before coloring it.
.border-0 on the child won't remove it — target the element that actually has the border style applied.
A second example — combining a circular border-radius with a colored border to build a simple avatar frame:
<img src="avatar.jpg" alt="User avatar"
class="rounded-circle border border-success border-3"
style="width: 80px; height: 80px; object-fit: cover;">Q: Can I control border thickness with utility classes?
A: Yes — Bootstrap 5 adds .border-1 through .border-5 for thickness, on top of the base .border class.
Q: What's the difference between rounded-pill and rounded-circle?
A: .rounded-pill creates fully rounded ends on a rectangular element (like a wide badge); .rounded-circle only looks like a circle when the element's width and height are equal.
Q: Do border utilities work with logical properties (start/end) for RTL languages?
A: Yes — .border-start and .border-end automatically flip sides in right-to-left layouts, unlike the older .border-left/.border-right from Bootstrap 4. See the official Bootstrap Borders documentation for the full class reference.