Bootstrap Borders

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.

Adding Borders

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>

Removing Borders

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.

Border Colors

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>

Border-Radius (Rounded Corners)

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>

Targeting Specific Corners

Similar to standard borders, you can target exact corners utilizing directional classes like .rounded-top, .rounded-end, .rounded-bottom, or .rounded-start!