Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

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:

Borders - 图1

html

  1. <span class="border"></span>
  2. <span class="border-top"></span>
  3. <span class="border-end"></span>
  4. <span class="border-bottom"></span>
  5. <span class="border-start"></span>

Subtractive

Or remove borders:

Borders - 图2

html

  1. <span class="border border-0"></span>
  2. <span class="border border-top-0"></span>
  3. <span class="border border-end-0"></span>
  4. <span class="border border-bottom-0"></span>
  5. <span class="border border-start-0"></span>

Color

Border utilities like .border-* that generated from our original $theme-colors Sass map don’t yet respond to color modes, however, any .border-*-subtle utility will. This will be resolved in v6.

Change the border color using utilities built on our theme colors.

Borders - 图3

html

  1. <span class="border border-primary"></span>
  2. <span class="border border-primary-subtle"></span>
  3. <span class="border border-secondary"></span>
  4. <span class="border border-secondary-subtle"></span>
  5. <span class="border border-success"></span>
  6. <span class="border border-success-subtle"></span>
  7. <span class="border border-danger"></span>
  8. <span class="border border-danger-subtle"></span>
  9. <span class="border border-warning"></span>
  10. <span class="border border-warning-subtle"></span>
  11. <span class="border border-info"></span>
  12. <span class="border border-info-subtle"></span>
  13. <span class="border border-light"></span>
  14. <span class="border border-light-subtle"></span>
  15. <span class="border border-dark"></span>
  16. <span class="border border-dark-subtle"></span>
  17. <span class="border border-black"></span>
  18. <span class="border border-white"></span>

Or modify the default border-color of a component:

Borders - 图4

html

  1. <div class="mb-4">
  2.   <label for="exampleFormControlInput1" class="form-label">Email address</label>
  3.   <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="name@example.com">
  4. </div>
  6. <div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
  7.   Dangerous heading
  8. </div>
  10. <div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
  11.   Changing border color and width
  12. </div>

Opacity

Added in v5.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.

  1. .border-success {
  2.   --bs-border-opacity: 1;
  3.   border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
  4. }

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.

Borders - 图5

html

  1. <div class="border border-success p-2 mb-2">This is default success border</div>
  2. <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:

Borders - 图6

html

  1. <div class="border border-success p-2 mb-2">This is default success border</div>
  2. <div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
  3. <div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
  4. <div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
  5. <div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>

Width

Borders - 图7

html

  1. <span class="border border-1"></span>
  2. <span class="border border-2"></span>
  3. <span class="border border-3"></span>
  4. <span class="border border-4"></span>
  5. <span class="border border-5"></span>

Radius

Add classes to an element to easily round its corners.

Borders - 图8

html

  1. <img src="..." class="rounded" alt="...">
  2. <img src="..." class="rounded-top" alt="...">
  3. <img src="..." class="rounded-end" alt="...">
  4. <img src="..." class="rounded-bottom" alt="...">
  5. <img src="..." class="rounded-start" alt="...">
  6. <img src="..." class="rounded-circle" alt="...">
  7. <img src="..." class="rounded-pill" alt="...">

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.

Borders - 图9

html

  1. <img src="..." class="rounded-0" alt="...">
  2. <img src="..." class="rounded-1" alt="...">
  3. <img src="..." class="rounded-2" alt="...">
  4. <img src="..." class="rounded-3" alt="...">
  5. <img src="..." class="rounded-4" alt="...">
  6. <img src="..." class="rounded-5" alt="...">

Borders - 图10

html

  1. <img src="..." class="rounded-bottom-1" alt="...">
  2. <img src="..." class="rounded-start-2" alt="...">
  3. <img src="..." class="rounded-end-circle" alt="...">
  4. <img src="..." class="rounded-start-pill" alt="...">
  5. <img src="..." class="rounded-5 rounded-top-0" alt="...">

CSS

Variables

Added in v5.2.0

scss/_root.scss

  1. --#{$prefix}border-width: #{$border-width};
  2. --#{$prefix}border-style: #{$border-style};
  3. --#{$prefix}border-color: #{$border-color};
  4. --#{$prefix}border-color-translucent: #{$border-color-translucent};
  6. --#{$prefix}border-radius: #{$border-radius};
  7. --#{$prefix}border-radius-sm: #{$border-radius-sm};
  8. --#{$prefix}border-radius-lg: #{$border-radius-lg};
  9. --#{$prefix}border-radius-xl: #{$border-radius-xl};
  10. --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
  11. --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
  12. --#{$prefix}border-radius-pill: #{$border-radius-pill};

Sass variables

scss/_variables.scss

  1. $border-width:                1px;
  2. $border-widths: (
  3.   1: 1px,
  4.   2: 2px,
  5.   3: 3px,
  6.   4: 4px,
  7.   5: 5px
  8. );
  9. $border-style:                solid;
  10. $border-color:                $gray-300;
  11. $border-color-translucent:    rgba($black, .175);

scss/_variables.scss

  1. $border-radius:               .375rem;
  2. $border-radius-sm:            .25rem;
  3. $border-radius-lg:            .5rem;
  4. $border-radius-xl:            1rem;
  5. $border-radius-xxl:           2rem;
  6. $border-radius-pill:          50rem;

Variables for setting border-color in .border-*-subtle utilities in light and dark mode:

scss/_variables.scss

  1. $primary-border-subtle:   tint-color($primary, 60%);
  2. $secondary-border-subtle: tint-color($secondary, 60%);
  3. $success-border-subtle:   tint-color($success, 60%);
  4. $info-border-subtle:      tint-color($info, 60%);
  5. $warning-border-subtle:   tint-color($warning, 60%);
  6. $danger-border-subtle:    tint-color($danger, 60%);
  7. $light-border-subtle:     $gray-200;
  8. $dark-border-subtle:      $gray-500;

scss/_variables-dark.scss

  1. $primary-border-subtle-dark:        shade-color($primary, 40%);
  2. $secondary-border-subtle-dark:      shade-color($secondary, 40%);
  3. $success-border-subtle-dark:        shade-color($success, 40%);
  4. $info-border-subtle-dark:           shade-color($info, 40%);
  5. $warning-border-subtle-dark:        shade-color($warning, 40%);
  6. $danger-border-subtle-dark:         shade-color($danger, 40%);
  7. $light-border-subtle-dark:          $gray-700;
  8. $dark-border-subtle-dark:           $gray-800;

Sass maps

Color mode adaptive border colors are also available as a Sass map:

scss/_maps.scss

  1. $theme-colors-border-subtle: (
  2.   "primary": $primary-border-subtle,
  3.   "secondary": $secondary-border-subtle,
  4.   "success": $success-border-subtle,
  5.   "info": $info-border-subtle,
  6.   "warning": $warning-border-subtle,
  7.   "danger": $danger-border-subtle,
  8.   "light": $light-border-subtle,
  9.   "dark": $dark-border-subtle,
  10. );

scss/_maps.scss

  1. $theme-colors-border-subtle-dark: (
  2.   "primary": $primary-border-subtle-dark,
  3.   "secondary": $secondary-border-subtle-dark,
  4.   "success": $success-border-subtle-dark,
  5.   "info": $info-border-subtle-dark,
  6.   "warning": $warning-border-subtle-dark,
  7.   "danger": $danger-border-subtle-dark,
  8.   "light": $light-border-subtle-dark,
  9.   "dark": $dark-border-subtle-dark,
  10. );

Sass mixins

scss/mixins/_border-radius.scss

  1. @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
  2.   @if $enable-rounded {
  3.     border-radius: valid-radius($radius);
  4.   }
  5.   @else if $fallback-border-radius != false {
  6.     border-radius: $fallback-border-radius;
  7.   }
  8. }
  10. @mixin border-top-radius($radius: $border-radius) {
  11.   @if $enable-rounded {
  12.     border-top-left-radius: valid-radius($radius);
  13.     border-top-right-radius: valid-radius($radius);
  14.   }
  15. }
  17. @mixin border-end-radius($radius: $border-radius) {
  18.   @if $enable-rounded {
  19.     border-top-right-radius: valid-radius($radius);
  20.     border-bottom-right-radius: valid-radius($radius);
  21.   }
  22. }
  24. @mixin border-bottom-radius($radius: $border-radius) {
  25.   @if $enable-rounded {
  26.     border-bottom-right-radius: valid-radius($radius);
  27.     border-bottom-left-radius: valid-radius($radius);
  28.   }
  29. }
  31. @mixin border-start-radius($radius: $border-radius) {
  32.   @if $enable-rounded {
  33.     border-top-left-radius: valid-radius($radius);
  34.     border-bottom-left-radius: valid-radius($radius);
  35.   }
  36. }
  38. @mixin border-top-start-radius($radius: $border-radius) {
  39.   @if $enable-rounded {
  40.     border-top-left-radius: valid-radius($radius);
  41.   }
  42. }
  44. @mixin border-top-end-radius($radius: $border-radius) {
  45.   @if $enable-rounded {
  46.     border-top-right-radius: valid-radius($radius);
  47.   }
  48. }
  50. @mixin border-bottom-end-radius($radius: $border-radius) {
  51.   @if $enable-rounded {
  52.     border-bottom-right-radius: valid-radius($radius);
  53.   }
  54. }
  56. @mixin border-bottom-start-radius($radius: $border-radius) {
  57.   @if $enable-rounded {
  58.     border-bottom-left-radius: valid-radius($radius);
  59.   }
  60. }

Sass utilities API

Border utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss/_utilities.scss

  1. "border": (
  2.   property: border,
  3.   values: (
  4.     null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
  5.     0: 0,
  6.   )
  7. ),
  8. "border-top": (
  9.   property: border-top,
  10.   values: (
  11.     null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
  12.     0: 0,
  13.   )
  14. ),
  15. "border-end": (
  16.   property: border-right,
  17.   class: border-end,
  18.   values: (
  19.     null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
  20.     0: 0,
  21.   )
  22. ),
  23. "border-bottom": (
  24.   property: border-bottom,
  25.   values: (
  26.     null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
  27.     0: 0,
  28.   )
  29. ),
  30. "border-start": (
  31.   property: border-left,
  32.   class: border-start,
  33.   values: (
  34.     null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
  35.     0: 0,
  36.   )
  37. ),
  38. "border-color": (
  39.   property: border-color,
  40.   class: border,
  41.   local-vars: (
  42.     "border-opacity": 1
  43.   ),
  44.   values: $utilities-border-colors
  45. ),
  46. "subtle-border-color": (
  47.   property: border-color,
  48.   class: border,
  49.   values: $utilities-border-subtle
  50. ),
  51. "border-width": (
  52.   property: border-width,
  53.   class: border,
  54.   values: $border-widths
  55. ),
  56. "border-opacity": (
  57.   css-var: true,
  58.   class: border-opacity,
  59.   values: (
  60.     10: .1,
  61.     25: .25,
  62.     50: .5,
  63.     75: .75,
  64.     100: 1
  65.   )
  66. ),

scss/_utilities.scss

  1. "rounded": (
  2.   property: border-radius,
  3.   class: rounded,
  4.   values: (
  5.     null: var(--#{$prefix}border-radius),
  6.     0: 0,
  7.     1: var(--#{$prefix}border-radius-sm),
  8.     2: var(--#{$prefix}border-radius),
  9.     3: var(--#{$prefix}border-radius-lg),
  10.     4: var(--#{$prefix}border-radius-xl),
  11.     5: var(--#{$prefix}border-radius-xxl),
  12.     circle: 50%,
  13.     pill: var(--#{$prefix}border-radius-pill)
  14.   )
  15. ),
  16. "rounded-top": (
  17.   property: border-top-left-radius border-top-right-radius,
  18.   class: rounded-top,
  19.   values: (
  20.     null: var(--#{$prefix}border-radius),
  21.     0: 0,
  22.     1: var(--#{$prefix}border-radius-sm),
  23.     2: var(--#{$prefix}border-radius),
  24.     3: var(--#{$prefix}border-radius-lg),
  25.     4: var(--#{$prefix}border-radius-xl),
  26.     5: var(--#{$prefix}border-radius-xxl),
  27.     circle: 50%,
  28.     pill: var(--#{$prefix}border-radius-pill)
  29.   )
  30. ),
  31. "rounded-end": (
  32.   property: border-top-right-radius border-bottom-right-radius,
  33.   class: rounded-end,
  34.   values: (
  35.     null: var(--#{$prefix}border-radius),
  36.     0: 0,
  37.     1: var(--#{$prefix}border-radius-sm),
  38.     2: var(--#{$prefix}border-radius),
  39.     3: var(--#{$prefix}border-radius-lg),
  40.     4: var(--#{$prefix}border-radius-xl),
  41.     5: var(--#{$prefix}border-radius-xxl),
  42.     circle: 50%,
  43.     pill: var(--#{$prefix}border-radius-pill)
  44.   )
  45. ),
  46. "rounded-bottom": (
  47.   property: border-bottom-right-radius border-bottom-left-radius,
  48.   class: rounded-bottom,
  49.   values: (
  50.     null: var(--#{$prefix}border-radius),
  51.     0: 0,
  52.     1: var(--#{$prefix}border-radius-sm),
  53.     2: var(--#{$prefix}border-radius),
  54.     3: var(--#{$prefix}border-radius-lg),
  55.     4: var(--#{$prefix}border-radius-xl),
  56.     5: var(--#{$prefix}border-radius-xxl),
  57.     circle: 50%,
  58.     pill: var(--#{$prefix}border-radius-pill)
  59.   )
  60. ),
  61. "rounded-start": (
  62.   property: border-bottom-left-radius border-top-left-radius,
  63.   class: rounded-start,
  64.   values: (
  65.     null: var(--#{$prefix}border-radius),
  66.     0: 0,
  67.     1: var(--#{$prefix}border-radius-sm),
  68.     2: var(--#{$prefix}border-radius),
  69.     3: var(--#{$prefix}border-radius-lg),
  70.     4: var(--#{$prefix}border-radius-xl),
  71.     5: var(--#{$prefix}border-radius-xxl),
  72.     circle: 50%,
  73.     pill: var(--#{$prefix}border-radius-pill)
  74.   )
  75. ),