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

Borders - 图1

  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

Borders - 图2

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

Border color

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

Borders - 图3

  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>

Border-width

Borders - 图4

  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>

Border-radius

Add classes to an element to easily round its corners.

Borders - 图5

  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 3, and can be configured by modifying the utilities API.

Borders - 图6

  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="...">

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. );
  9. $border-color: $gray-300;
  1. $border-radius: .25rem;
  2. $border-radius-sm: .2rem;
  3. $border-radius-lg: .3rem;
  4. $border-radius-pill: 50rem;

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. }
  9. @mixin border-top-radius($radius: $border-radius) {
  10. @if $enable-rounded {
  11. border-top-left-radius: valid-radius($radius);
  12. border-top-right-radius: valid-radius($radius);
  13. }
  14. }
  15. @mixin border-end-radius($radius: $border-radius) {
  16. @if $enable-rounded {
  17. border-top-right-radius: valid-radius($radius);
  18. border-bottom-right-radius: valid-radius($radius);
  19. }
  20. }
  21. @mixin border-bottom-radius($radius: $border-radius) {
  22. @if $enable-rounded {
  23. border-bottom-right-radius: valid-radius($radius);
  24. border-bottom-left-radius: valid-radius($radius);
  25. }
  26. }
  27. @mixin border-start-radius($radius: $border-radius) {
  28. @if $enable-rounded {
  29. border-top-left-radius: valid-radius($radius);
  30. border-bottom-left-radius: valid-radius($radius);
  31. }
  32. }
  33. @mixin border-top-start-radius($radius: $border-radius) {
  34. @if $enable-rounded {
  35. border-top-left-radius: valid-radius($radius);
  36. }
  37. }
  38. @mixin border-top-end-radius($radius: $border-radius) {
  39. @if $enable-rounded {
  40. border-top-right-radius: valid-radius($radius);
  41. }
  42. }
  43. @mixin border-bottom-end-radius($radius: $border-radius) {
  44. @if $enable-rounded {
  45. border-bottom-right-radius: valid-radius($radius);
  46. }
  47. }
  48. @mixin border-bottom-start-radius($radius: $border-radius) {
  49. @if $enable-rounded {
  50. border-bottom-left-radius: valid-radius($radius);
  51. }
  52. }

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: $border-width solid $border-color,
  5. 0: 0,
  6. )
  7. ),
  8. "border-top": (
  9. property: border-top,
  10. values: (
  11. null: $border-width solid $border-color,
  12. 0: 0,
  13. )
  14. ),
  15. "border-end": (
  16. property: border-right,
  17. class: border-end,
  18. values: (
  19. null: $border-width solid $border-color,
  20. 0: 0,
  21. )
  22. ),
  23. "border-bottom": (
  24. property: border-bottom,
  25. values: (
  26. null: $border-width solid $border-color,
  27. 0: 0,
  28. )
  29. ),
  30. "border-start": (
  31. property: border-left,
  32. class: border-start,
  33. values: (
  34. null: $border-width solid $border-color,
  35. 0: 0,
  36. )
  37. ),
  38. "border-color": (
  39. property: border-color,
  40. class: border,
  41. values: map-merge($theme-colors, ("white": $white))
  42. ),
  43. "border-width": (
  44. property: border-width,
  45. class: border,
  46. values: $border-widths
  47. ),
  1. "rounded": (
  2. property: border-radius,
  3. class: rounded,
  4. values: (
  5. null: $border-radius,
  6. 0: 0,
  7. 1: $border-radius-sm,
  8. 2: $border-radius,
  9. 3: $border-radius-lg,
  10. circle: 50%,
  11. pill: $border-radius-pill
  12. )
  13. ),
  14. "rounded-top": (
  15. property: border-top-left-radius border-top-right-radius,
  16. class: rounded-top,
  17. values: (null: $border-radius)
  18. ),
  19. "rounded-end": (
  20. property: border-top-right-radius border-bottom-right-radius,
  21. class: rounded-end,
  22. values: (null: $border-radius)
  23. ),
  24. "rounded-bottom": (
  25. property: border-bottom-right-radius border-bottom-left-radius,
  26. class: rounded-bottom,
  27. values: (null: $border-radius)
  28. ),
  29. "rounded-start": (
  30. property: border-bottom-left-radius border-top-left-radius,
  31. class: rounded-start,
  32. values: (null: $border-radius)
  33. ),