Borders

Border utilities allow you to modify the borders of your display elements
Default Bootstrap Borders
Additive:
.border
.border-top
.border-end
.border-bottom
.border-start
The above border utilities will add borders to any element.
Subtractive:
.border-0
.border-top-0
.border-end-0
.border-bottom-0
.border-start-0
The above border utilities will subtract borders from any element that already has them.
Border Colors
Bootstrap Default State Colors:
.border-primary
.border-secondary
.border-success
.border-danger
.border-warning
.border-info
.border-light
.border-dark
.border-white
Bootstrap's state specific border colors can be used in unison with the additive or subtractive border utilities above.
Extended Border Colors:
.border-red
.border-orange
.border-yellow
.border-green
.border-teal
.border-cyan
.border-blue
.border-indigo
.border-purple
.border-pink
SB Admin Pro's expanded color system allows you to use non-contextual border colors instead of state specific ones.
Default Bootstrap Border Radius
Rounded Corners:
.rounded
.rounded-top
.rounded-end
.rounded-bottom
.rounded-start
.rounded-0
The above border utilities will round the corners of your element based on which utility you specify. You can use them together as well!
Other Utilities:
.rounded-circle
.rounded-pill
It is recommended that you only use the .rounded-circle utility on square elements and the .rounded-pill utility on elements with a width that is larger than it's height.
Default Bootstrap Border Radius Sizes
.rounded-sm
.rounded
.rounded-lg
.rounded-xl
You can set the border radius sizes in by changes their respective SCSS variables in the ../variables/components.scss file.
Custom Border Thickness
.border
.border .border-lg
.border-top .border-lg
.border-end .border-lg
.border-bottom .border-lg
.border-start .border-lg
You can change to a thicker border radius using the .border-lg utility classes, which extends the default Bootstrap functionalilty.
Combining Border Utilities
Basic Combinations:
Combine border position, radius, color, and thickness utilities!
Combine border position, radius, color, and thickness utilities!
Combine border position, radius, color, and thickness utilities!
Combine border position, radius, color, and thickness utilities!
By combining utility classes, you can avoid creating your own custom components, saving time and decresing CSS bloat throughout your project!
Modified Cards:
This is a custom card with a thick, colored border.
This is a custom card with a thick, colored border.
This is a custom card with a thick, colored border.
This is a custom card with a thick, colored border.
Use utility classes to modify the style of components on the fly! You don't need to use the default border utility classes if the component already has a border by default.
Modified Alerts:
Any element that already has a border defined by default doesn't need to use the Bootstrap border utilities!