What Is Bootstrap 5 Border Utilities?
Bootstrap 5 border utilities are CSS classes that add, remove, colour, size and round borders on any element directly in the HTML. Classes such as .border, .border-top, .border-0, .border-primary, .border-2 and .rounded cover the most common border styles without custom CSS.
What Are Bootstrap 5 Border Utilities?
Borders separate and frame content: a thin line between list items, an outline around a form or card, a coloured accent on a callout, or a rounded frame around an avatar. Bootstrap 5 groups these adjustments into five families of utility classes. Additive classes add a border to all sides (.border) or to one side (.border-top, .border-end, .border-bottom, .border-start). Subtractive classes remove it (.border-0, or one side with .border-top-0, .border-end-0 and so on), which is useful for stripping the default border from components such as cards and inputs. Colour classes use the theme colours (.border-primary, .border-secondary, .border-success, .border-danger, .border-warning, .border-info, .border-light, .border-dark, .border-black, .border-white), and Bootstrap 5.3 adds subtle versions such as .border-primary-subtle. Width classes run from .border-1 to .border-5, and radius classes include .rounded, .rounded-0 to .rounded-5, .rounded-circle, .rounded-pill and side-specific versions such as .rounded-top.
How Bootstrap 5 Border Utilities Work
.border sets border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important, which by default draws a 1px solid light grey line (#dee2e6). The side classes apply the same values to one side only. Colour and width classes change only the border's colour or width: .border-primary sets the colour to the primary theme colour and .border-3 sets the width to 3px, so you combine them with a class that creates the border, as in <div class="border border-primary border-3">. In Bootstrap 5.3, the colour classes also respect a --bs-border-opacity variable, so adding .border-opacity-50 makes a coloured border 50 percent transparent. Radius classes set border-radius from a scale of variables: .rounded uses the default radius (--bs-border-radius, 0.375rem in Bootstrap 5.3), .rounded-1 to .rounded-5 step from small to extra-large, .rounded-circle sets 50 percent to turn a square into a circle, and .rounded-pill uses a very large radius for capsule shapes. Start and end classes follow the document direction, so .border-start becomes a right-hand border in right-to-left layouts. The utilities apply !important, so they override component styles, and they are not responsive by default, which means there is no .border-md-0 unless you enable it through the utilities API.
Best Practices for Bootstrap 5 Border Utilities
Always pair colour and width classes with a class that actually creates the border, such as .border or .border-start; .border-primary on its own shows nothing. Use borders sparingly and consistently. Pick one default width and one or two colours for dividers and outlines across the site, and save stronger borders for emphasis, such as .border-start.border-4.border-primary on a callout or a .border-primary outline on a recommended pricing plan. Prefer spacing and background colour over borders when grouping content, because too many boxes make a page look cluttered. Use .border-0 to remove default borders from cards when you want a flatter look, but keep visible outlines on form inputs so users can see where to type, and check that input borders have at least 3:1 contrast against the background, as WCAG 2.1 success criterion 1.4.11 (Non-text Contrast) requires for the visual boundaries of interactive components. Keep border radius consistent too: mixing .rounded-0, .rounded and .rounded-4 on neighbouring elements looks accidental. For site-wide changes, adjust the Sass variables $border-width, $border-color and $border-radius, or the matching CSS variables, instead of adding classes everywhere. Finally, use .rounded-circle only on square elements, such as an image with equal width and height, otherwise the result is an oval.
Bootstrap 5 Border Utilities and Canvas Builder
Canvas Builder generates Bootstrap 5 HTML, so borders and rounded corners in generated pages can be adjusted with the standard border and radius classes in the exported code, from removing a card border with .border-0 to adding an accent with .border-start. For a consistent look across the whole site, change the border variables once in the stylesheet rather than editing each element.
Frequently asked questions
How do I add a border to only one side in Bootstrap 5?
Use a side class: .border-top, .border-end, .border-bottom or .border-start. Combine it with colour and width classes if needed, for example .border-start.border-primary.border-4 for a thick accent line on the left in left-to-right layouts.
How do I remove a border in Bootstrap 5?
Add .border-0 to remove all borders, or a side-specific class such as .border-bottom-0 to remove one side. These classes use !important, so they override the default borders on components such as cards, tables and form controls.
How do I change the border colour in Bootstrap 5?
Add a colour class such as .border-primary, .border-danger or, in Bootstrap 5.3, .border-primary-subtle, together with .border or a side class. For a custom colour, set border-color in your own CSS, or override the --bs-border-color variable to change the default for the whole site.
How do I make an image circular in Bootstrap 5?
Add .rounded-circle to an image with equal width and height, for example a 96 by 96 pixel avatar. If the source image is not square, set equal dimensions and use object-fit: cover (Bootstrap 5.3 has an .object-fit-cover class) so it fills the circle without distortion.