site/src/content/docs/utilities/borders.mdx
import { getData } from '@libs/data'
Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
Add borders to custom elements:
<Example class="bd-example-border-utils" code={<span class="border"></span> <span class="border-top"></span> <span class="border-end"></span> <span class="border-bottom"></span> <span class="border-start"></span>} />
Or remove borders:
<Example class="bd-example-border-utils" code={<span class="border border-0"></span> <span class="border border-top-0"></span> <span class="border border-end-0"></span> <span class="border border-bottom-0"></span> <span class="border border-start-0"></span>} />
Change the border color using utilities built on our theme colors.
<Example class="bd-example-border-utils" code={[
...getData('theme-colors').map((themeColor) => <span class="border border-${themeColor.name}"></span> <span class="border border-${themeColor.name}-subtle"></span>),
<span class="border border-black"></span> <span class="border border-white"></span>
]} />
Or modify the default border-color of a component:
<Example code={`<div class="mb-4"> <label for="exampleFormControlInput1" class="form-label">Email address</label> <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="[email protected]">
</div> <div class="h4 pb-2 mb-4 text-danger border-bottom border-danger"> Dangerous heading </div> <div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end"> Changing border color and width </div>`} />Bootstrap border-{color} utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
Consider our default .border-success utility.
.border-success {
--bs-border-opacity: 1;
border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}
We use an RGB version of our --bs-success (with the value of 25, 135, 84) CSS variable and attached a second CSS variable, --bs-border-opacity, for the alpha transparency (with a default value 1 thanks to a local CSS variable). That means anytime you use .border-success now, your computed color value is rgba(25, 135, 84, 1). The local CSS variable inside each .border-* class avoids inheritance issues so nested instances of the utilities don’t automatically have a modified alpha transparency.
To change that opacity, override --bs-border-opacity via custom styles or inline styles.
<Example code={`<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2" style="--bs-border-opacity: .5;">This is 50% opacity success border</div>`} />Or, choose from any of the .border-opacity utilities:
<Example code={`<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div> <div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div> <div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div> <div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>`} /><Example class="bd-example-border-utils" code={<span class="border border-1"></span> <span class="border border-2"></span> <span class="border border-3"></span> <span class="border border-4"></span> <span class="border border-5"></span>} />
Add classes to an element to easily round its corners.
<Example class="bd-example-rounded-utils" code={<Placeholder width="75" height="75" class="rounded" title="Example rounded image" /> <Placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" /> <Placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" /> <Placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" /> <Placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" />} />
Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 5 including circle and pill, and can be configured by modifying the utilities API.
<Example class="bd-example-rounded-utils" code={<Placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" /> <Placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" /> <Placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" /> <Placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" /> <Placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" /> <Placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" /> <Placeholder width="75" height="75" class="rounded-circle" title="Completely round image" /> <Placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" />} />
<Example class="bd-example-rounded-utils" code={<Placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" /> <Placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" /> <Placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" /> <Placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" /> <Placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" />} />
Variables for setting border-color in .border-*-subtle utilities in light and dark mode:
Color mode adaptive border colors are also available as a Sass map:
<ScssDocs name="theme-border-subtle-map" file="scss/_maps.scss" /> <ScssDocs name="theme-border-subtle-dark-map" file="scss/_maps.scss" />Border utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.