2016-09-09 08:21:40 +02:00
---
layout: docs
title: Borders
2017-05-28 20:25:59 +02:00
description: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
2016-09-09 08:21:40 +02:00
group: utilities
2017-05-28 20:25:59 +02:00
toc: true
2016-09-09 08:21:40 +02:00
---
2016-11-27 01:44:16 +01:00
## Border
2018-01-02 05:51:20 +01:00
Use border utilities to add or remove an element's borders. Choose from all borders or one at a time.
### Additive
2016-11-27 01:44:16 +01:00
2022-05-06 06:32:02 +02:00
Add borders to custom elements:
2019-10-22 04:11:22 +02:00
{{< example class = "bd-example-border-utils" > }}
2017-06-26 03:39:00 +02:00
< span class = "border" > < / span >
2017-12-31 06:52:02 +01:00
< span class = "border-top" > < / span >
2020-06-09 15:44:20 +02:00
< span class = "border-end" > < / span >
2017-12-31 06:52:02 +01:00
< span class = "border-bottom" > < / span >
2020-06-09 15:44:20 +02:00
< span class = "border-start" > < / span >
2019-01-08 17:33:28 +01:00
{{< / example > }}
2018-01-02 05:51:20 +01:00
### Subtractive
2022-05-06 06:32:02 +02:00
Or remove borders:
2022-05-20 19:28:31 +02:00
{{< example class = "bd-example-border-utils" > }}
< 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 >
2019-01-08 17:33:28 +01:00
{{< / example > }}
2016-11-27 01:44:16 +01:00
2021-11-30 06:14:17 +01:00
## Color
2017-06-26 03:39:00 +02:00
2023-01-17 00:50:08 +01:00
{{< callout info > }}
Border utilities like `.border-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, howver, any `.border-*-subtle` utility will. This will be resolved in v6.
{{< / callout > }}
2017-06-26 03:39:00 +02:00
Change the border color using utilities built on our theme colors.
2019-10-22 04:11:22 +02:00
{{< example class = "bd-example-border-utils" > }}
2019-01-08 17:33:28 +01:00
{{< border.inline > }}
{{- range (index $.Site.Data "theme-colors") }}
< span class = "border border-{{ .name }}" > < / span >
Add dark mode support (#35857)
* Add dark mode to docs
* Minor fix: missing space indentation
* Minor fix: revert utilities/z-index added-in modification
* Remove prev: and next: from doc because extracted to another PR
* Use .bg-body-tertiary in all Utilities > Overflow examples
* fix example
* Fix up spacing examples
* Update box-shadow Sass variables and utilities to auto-adjust to color modes
* Remove unused docs class
* Refactor form styles to use CSS variable for background images on .form-check and .form-switch
* Fix docs selector
* Rename shortcut for clarity
* Heading consistency
* Reintroduce missing 4th grid item in Utilities > Spacing example
* Fix bundlewatch
* .bd-callout* rendering is OK so removing comments in the code
* Update scss/_utilities.scss
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* Fix gutters example styling
* Fix text colors on background utils docs
* redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken
* fix some color utils examples
* Deprecate mixin notice
* Deprecate notice for list-group-item-variant() mixin
* Revamp new link CSS vars
* Use map-keys in some each Sass files
* Remove list-group-item-variant mixin ref in sass loop desc
* Display CSS vars scoped to our built-in dark mode
* Revert previous commit
* Fix list group variant link
* Fix typo
* Remove imports of alert/list-group mixins in scss/_mixins.scss
* Small formatting + comments removal in scss/_content.scss
* Fix alert links colors
* fix dropdown border-radius mixin
* fix link color and underline again, this time using CSS var override for color var and fallback value for the underline
* fix colors on docs navbar for dark mode
* remove two changes
* missing ref
* another link underline fix, just use sass vars for link decoration for now
* missing color bg docs, plus move dropdown override to scss
* more changes from review
* fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin
* Few fixes around type
- Restored CSS variable for color on headings, this time with a fallback value
- In conjunction, restored and wrapped the default CSS var with a null value check
- Split headings and paragraphs docs in Reboot, elaborated on them
* Restyle custom details > summary element in docs
* Rewrite some migration docs
* fix form checks
* Fix up some navbar styling, tweak docs callout
* Fix select images, mostly for validation styling
* Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs
* Update site/content/docs/5.2/components/scrollspy.md
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* Apply suggestions from code review
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* mention form control css vars in migration guide
* Tweak grid and flex docs background examples
* clarify some docs
* fix some more things
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-11-29 07:30:26 +01:00
< span class = "border border-{{ .name }}-subtle" > < / span >
2019-01-08 17:33:28 +01:00
{{- end -}}
{{< / border.inline > }}
2017-08-08 06:35:43 +02:00
< span class = "border border-white" > < / span >
2019-01-08 17:33:28 +01:00
{{< / example > }}
2017-06-26 03:39:00 +02:00
2022-05-06 06:32:02 +02:00
Or modify the default `border-color` of a component:
{{< example > }}
< div class = "mb-4" >
< label for = "exampleFormControlInput1" class = "form-label" > Email address< / label >
< input type = "email" class = "form-control border-success" id = "exampleFormControlInput1" placeholder = "name@example.com" >
< / div >
2022-04-07 02:35:31 +02:00
2022-05-06 06:32:02 +02:00
< 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 >
{{< / example > }}
2022-04-07 02:35:31 +02:00
2021-11-30 06:14:17 +01:00
## Opacity
2022-03-12 06:27:58 +01:00
{{< added-in " 5 . 2 . 0 " > }}
2021-11-30 06:14:17 +01:00
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.
```css
.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 > }}
< 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 >
{{< / example > }}
Or, choose from any of the `.border-opacity` utilities:
{{< example > }}
< 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 > }}
## Width
2020-09-09 10:28:52 +02:00
{{< example class = "bd-example-border-utils" > }}
< 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 >
{{< / example > }}
2021-11-30 06:14:17 +01:00
## Radius
2016-09-09 08:21:40 +02:00
Add classes to an element to easily round its corners.
2020-02-14 07:22:10 +01:00
{{< example class = "bd-example-rounded-utils" > }}
2019-09-02 11:52:26 +02:00
{{< placeholder width = "75" height = "75" class = "rounded" title = "Example rounded image" > }}
{{< placeholder width = "75" height = "75" class = "rounded-top" title = "Example top rounded image" > }}
2020-06-09 15:44:20 +02:00
{{< placeholder width = "75" height = "75" class = "rounded-end" title = "Example right rounded image" > }}
2019-09-02 11:52:26 +02:00
{{< placeholder width = "75" height = "75" class = "rounded-bottom" title = "Example bottom rounded image" > }}
2020-06-09 15:44:20 +02:00
{{< placeholder width = "75" height = "75" class = "rounded-start" title = "Example left rounded image" > }}
2019-09-02 11:52:26 +02:00
{{< 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 > }}
2016-09-09 08:21:40 +02:00
2020-10-30 21:42:11 +01:00
### Sizes
2019-01-13 20:49:25 +01:00
2022-05-16 06:55:56 +02:00
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.
2019-01-13 20:49:25 +01:00
2020-02-14 07:22:10 +01:00
{{< example class = "bd-example-rounded-utils" > }}
2020-10-30 21:42:11 +01:00
{{< 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" > }}
2022-03-01 02:22:14 +01:00
{{< 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" > }}
2019-09-02 11:52:26 +02:00
{{< / example > }}
2021-02-11 04:29:59 +01:00
2022-10-03 20:52:41 +02:00
{{< 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 > }}
2022-04-29 22:59:41 +02:00
## CSS
2021-02-11 04:29:59 +01:00
### Variables
2022-07-25 16:51:12 +02:00
{{< added-in " 5 . 2 . 0 " > }}
2022-04-29 22:59:41 +02:00
{{< scss-docs name = "root-border-var" file = "scss/_root.scss" > }}
### Sass variables
2021-02-11 04:29:59 +01:00
{{< scss-docs name = "border-variables" file = "scss/_variables.scss" > }}
{{< scss-docs name = "border-radius-variables" file = "scss/_variables.scss" > }}
2022-04-29 22:59:41 +02:00
### Sass mixins
2021-02-11 04:29:59 +01:00
{{< scss-docs name = "border-radius-mixins" file = "scss/mixins/_border-radius.scss" > }}
2021-03-17 20:55:13 +01:00
### Utilities API
2021-02-11 04:29:59 +01:00
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" > }}