* Bump version to 5.3.0-alpha1 * Dist * Add docs versions updates * Update note in homepage hero Co-authored-by: Mark Otto <markdotto@gmail.com>
6.8 KiB
layout | title | description | group | toc |
---|---|---|---|---|
docs | Borders | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element. | utilities | true |
Border
Use border utilities to add or remove an element's borders. Choose from all borders or one at a time.
Additive
Add borders to custom elements:
{{< example class="bd-example-border-utils" >}} {{< /example >}}
Subtractive
Or remove borders:
{{< example class="bd-example-border-utils" >}} {{< /example >}}
Color
Change the border color using utilities built on our theme colors.
{{< example class="bd-example-border-utils" >}} {{< border.inline >}} {{- range (index $.Site.Data "theme-colors") }} {{- end -}} {{< /border.inline >}} {{< /example >}}
Or modify the default border-color
of a component:
{{< example >}}
Opacity
{{< added-in "5.2.0" >}}
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.
How it works
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.
Example
To change that opacity, override --bs-border-opacity
via custom styles or inline styles.
{{< example >}}
Or, choose from any of the .border-opacity
utilities:
{{< example >}}
Width
{{< example class="bd-example-border-utils" >}} {{< /example >}}
Radius
Add classes to an element to easily round its corners.
{{< example class="bd-example-rounded-utils" >}} {{< 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" >}} {{< 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 >}}
Sizes
Use the scaling classes for larger or smaller rounded corners. Sizes range from 0
to 5
, and can be configured by modifying the utilities API.
{{< example class="bd-example-rounded-utils" >}} {{< 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" >}} {{< /example >}}
{{< example class="bd-example-rounded-utils" >}} {{< 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" >}} {{< /example >}}
CSS
Variables
{{< added-in "5.2.0" >}}
{{< scss-docs name="root-border-var" file="scss/_root.scss" >}}
Sass variables
{{< scss-docs name="border-variables" file="scss/_variables.scss" >}}
{{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}}
Sass mixins
{{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}}
Utilities API
Border utilities are declared in our utilities API in scss/_utilities.scss
. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-borders" file="scss/_utilities.scss" >}}
{{< scss-docs name="utils-border-radius" file="scss/_utilities.scss" >}}