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.
On this page Border
Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
AdditiveSubtractiveBorder color
Change the border color using utilities built on our theme colors.
Border-widthBorder-radius
Add classes to an element to easily round its corners.
Example rounded image75x75Example top rounded image75x75Example right rounded image75x75Example bottom rounded image75x75Example left rounded image75x75Completely round image75x75Rounded pill image150x75Sizes
Use the scaling classes for larger or smaller rounded corners. Sizes range fromto 3, and can be configured by modifying the utilities API.
Example non-rounded image75x75Example small rounded image75x75Example default rounded image75x75Example large rounded image75x75SassVariables$border-width: 1px;$border-widths: ( 1: 1px, 2: 2px, 3: 3px, 4: 4px, 5: 5px);$border-color: $gray-300;$border-radius: .25rem;$border-radius-sm: .2rem;$border-radius-lg: .3rem;$border-radius-pill: 50rem;Mixins@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { @if $enable-rounded { border-radius: valid-radius($radius); } @else if $fallback-border-radius != false { border-radius: $fallback-border-radius; }}@mixin border-top-radius($radius: $border-radius) { @if $enable-rounded { border-top-left-radius: valid-radius($radius); border-top-right-radius: valid-radius($radius); }}@mixin border-end-radius($radius: $border-radius) { @if $enable-rounded { border-top-right-radius: valid-radius($radius); border-bottom-right-radius: valid-radius($radius); }}@mixin border-bottom-radius($radius: $border-radius) { @if $enable-rounded { border-bottom-right-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius); }}@mixin border-start-radius($radius: $border-radius) { @if $enable-rounded { border-top-left-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius); }}@mixin border-top-start-radius($radius: $border-radius) { @if $enable-rounded { border-top-left-radius: valid-radius($radius); }}@mixin border-top-end-radius($radius: $border-radius) { @if $enable-rounded { border-top-right-radius: valid-radius($radius); }}@mixin border-bottom-end-radius($radius: $border-radius) { @if $enable-rounded { border-bottom-right-radius: valid-radius($radius); }}@mixin border-bottom-start-radius($radius: $border-radius) { @if $enable-rounded { border-bottom-left-radius: valid-radius($radius); }}Utilities API
Border utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.
“border”: ( property: border, values: ( null: $border-width solid $border-color, 0: 0, ) ), “border-top”: ( property: border-top, values: ( null: $border-width solid $border-color, 0: 0, ) ), “border-end”: ( property: border-right, class: border-end, values: ( null: $border-width solid $border-color, 0: 0, ) ), “border-bottom”: ( property: border-bottom, values: ( null: $border-width solid $border-color, 0: 0, ) ), “border-start”: ( property: border-left, class: border-start, values: ( null: $border-width solid $border-color, 0: 0, ) ), “border-color”: ( property: border-color, class: border, values: map-merge($theme-colors, (“white”: $white)) ), “border-width”: ( property: border-width, class: border, values: $border-widths ), “rounded”: ( property: border-radius, class: rounded, values: ( null: $border-radius, 0: 0, 1: $border-radius-sm, 2: $border-radius, 3: $border-radius-lg, circle: 50%, pill: $border-radius-pill ) ), “rounded-top”: ( property: border-top-left-radius border-top-right-radius, class: rounded-top, values: (null: $border-radius) ), “rounded-end”: ( property: border-top-right-radius border-bottom-right-radius, class: rounded-end, values: (null: $border-radius) ), “rounded-bottom”: ( property: border-bottom-right-radius border-bottom-left-radius, class: rounded-bottom, values: (null: $border-radius) ), “rounded-start”: ( property: border-bottom-left-radius border-top-left-radius, class: rounded-start, values: (null: $border-radius) ),