Default Bootstrap Borders
The above border utilities will add borders to any element.
The above border utilities will subtract borders from any element that already has them.
Bootstrap Default State Colors:
Bootstrap's state specific border colors can be used in unison with the additive or subtractive border utilities above.
Extended Border Colors:
SB Admin Pro's expanded color system allows you to use non-contextual border colors instead of state specific ones.
Default Bootstrap Border Radius
The above border utilities will round the corners of your element based on which utility you specify. You can use them together as well!
It is recommended that you only use the
.rounded-circleutility on square elements and the
.rounded-pillutility on elements with a width that is larger than it's height.
Default Bootstrap Border Radius Sizes
You can set the border radius sizes in by changes their respective SCSS variables in the
Custom Border Thickness
You can change to a thicker border radius using the
.border-lgutility classes, which extends the default Bootstrap functionalilty.
Combining Border Utilities
By combining utility classes, you can avoid creating your own custom components, saving time and decresing CSS bloat throughout your project!
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.
Any element that already has a border defined by default doesn't need to use the Bootstrap border utilities!