View on GitHub

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

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-secondary"></span>
  3. <span class="border border-success"></span>
  4. <span class="border border-danger"></span>
  5. <span class="border border-warning"></span>
  6. <span class="border border-info"></span>
  7. <span class="border border-light"></span>
  8. <span class="border border-dark"></span>
  9. <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="...">

CSS

Variables

Added in v5.2.0

  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-2xl: #{$border-radius-2xl};
  11.   --#{$prefix}border-radius-pill: #{$border-radius-pill};

Sass variables

  1. $border-width:                1px;
  2. $border-widths: (
  3.   1: 1px,
  4.   2: 2px,
  5.   3: 3px,
  6.   4: 4px,
  7.   5: 5px
  8. );
  10. $border-style:                solid;
  11. $border-color:                $gray-300;
  12. $border-color-translucent:    rgba($black, .175);
  1. $border-radius:               .375rem;
  2. $border-radius-sm:            .25rem;
  3. $border-radius-lg:            .5rem;
  4. $border-radius-xl:            1rem;
  5. $border-radius-2xl:           2rem;
  6. $border-radius-pill:          50rem;

Sass mixins

  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. }

Utilities API

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

  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.     "border-width": (
  47.       css-var: true,
  48.       css-variable-name: border-width,
  49.       class: border,
  50.       values: $border-widths
  51.     ),
  52.     "border-opacity": (
  53.       css-var: true,
  54.       class: border-opacity,
  55.       values: (
  56.         10: .1,
  57.         25: .25,
  58.         50: .5,
  59.         75: .75,
  60.         100: 1
  61.       )
  62.     ),
  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-2xl),
  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: (null: var(--#{$prefix}border-radius))
  20.     ),
  21.     "rounded-end": (
  22.       property: border-top-right-radius border-bottom-right-radius,
  23.       class: rounded-end,
  24.       values: (null: var(--#{$prefix}border-radius))
  25.     ),
  26.     "rounded-bottom": (
  27.       property: border-bottom-right-radius border-bottom-left-radius,
  28.       class: rounded-bottom,
  29.       values: (null: var(--#{$prefix}border-radius))
  30.     ),
  31.     "rounded-start": (
  32.       property: border-bottom-left-radius border-top-left-radius,
  33.       class: rounded-start,
  34.       values: (null: var(--#{$prefix}border-radius))
  35.     ),