Skip to main content Skip to docs navigation

Border radius

Use border radius…

GitHub Edit on GitHub MDN MDN
On this page
Class Styles
.rounded border-radius: var(--bs-border-radius);
.rounded-0 border-radius: 0;
.rounded-1 border-radius: var(--bs-border-radius-sm);
.rounded-2 border-radius: var(--bs-border-radius);
.rounded-3 border-radius: var(--bs-border-radius-lg);
.rounded-4 border-radius: var(--bs-border-radius-xl);
.rounded-5 border-radius: var(--bs-border-radius-2xl);
.rounded-circle border-radius: 50%;
.rounded-pill border-radius: var(--bs-border-radius-pill);
.rounded-top border-start-start-radius: var(--bs-border-radius);
border-start-end-radius: var(--bs-border-radius);
.rounded-top-0 border-start-start-radius: 0;
border-start-end-radius: 0;
.rounded-top-1 border-start-start-radius: var(--bs-border-radius-sm);
border-start-end-radius: var(--bs-border-radius-sm);
.rounded-top-2 border-start-start-radius: var(--bs-border-radius);
border-start-end-radius: var(--bs-border-radius);
.rounded-top-3 border-start-start-radius: var(--bs-border-radius-lg);
border-start-end-radius: var(--bs-border-radius-lg);
.rounded-top-4 border-start-start-radius: var(--bs-border-radius-xl);
border-start-end-radius: var(--bs-border-radius-xl);
.rounded-top-5 border-start-start-radius: var(--bs-border-radius-2xl);
border-start-end-radius: var(--bs-border-radius-2xl);
.rounded-top-circle border-start-start-radius: 50%;
border-start-end-radius: 50%;
.rounded-top-pill border-start-start-radius: var(--bs-border-radius-pill);
border-start-end-radius: var(--bs-border-radius-pill);
.rounded-end border-end-end-radius: var(--bs-border-radius);
border-end-start-radius: var(--bs-border-radius);
.rounded-end-0 border-end-end-radius: 0;
border-end-start-radius: 0;
.rounded-end-1 border-end-end-radius: var(--bs-border-radius-sm);
border-end-start-radius: var(--bs-border-radius-sm);
.rounded-end-2 border-end-end-radius: var(--bs-border-radius);
border-end-start-radius: var(--bs-border-radius);
.rounded-end-3 border-end-end-radius: var(--bs-border-radius-lg);
border-end-start-radius: var(--bs-border-radius-lg);
.rounded-end-4 border-end-end-radius: var(--bs-border-radius-xl);
border-end-start-radius: var(--bs-border-radius-xl);
.rounded-end-5 border-end-end-radius: var(--bs-border-radius-2xl);
border-end-start-radius: var(--bs-border-radius-2xl);
.rounded-end-circle border-end-end-radius: 50%;
border-end-start-radius: 50%;
.rounded-end-pill border-end-end-radius: var(--bs-border-radius-pill);
border-end-start-radius: var(--bs-border-radius-pill);
.rounded-bottom border-end-end-radius: var(--bs-border-radius);
border-end-start-radius: var(--bs-border-radius);
.rounded-bottom-0 border-end-end-radius: 0;
border-end-start-radius: 0;
.rounded-bottom-1 border-end-end-radius: var(--bs-border-radius-sm);
border-end-start-radius: var(--bs-border-radius-sm);
.rounded-bottom-2 border-end-end-radius: var(--bs-border-radius);
border-end-start-radius: var(--bs-border-radius);
.rounded-bottom-3 border-end-end-radius: var(--bs-border-radius-lg);
border-end-start-radius: var(--bs-border-radius-lg);
.rounded-bottom-4 border-end-end-radius: var(--bs-border-radius-xl);
border-end-start-radius: var(--bs-border-radius-xl);
.rounded-bottom-5 border-end-end-radius: var(--bs-border-radius-2xl);
border-end-start-radius: var(--bs-border-radius-2xl);
.rounded-bottom-circle border-end-end-radius: 50%;
border-end-start-radius: 50%;
.rounded-bottom-pill border-end-end-radius: var(--bs-border-radius-pill);
border-end-start-radius: var(--bs-border-radius-pill);
.rounded-start border-start-start-radius: var(--bs-border-radius);
border-start-end-radius: var(--bs-border-radius);
.rounded-start-0 border-start-start-radius: 0;
border-start-end-radius: 0;
.rounded-start-1 border-start-start-radius: var(--bs-border-radius-sm);
border-start-end-radius: var(--bs-border-radius-sm);
.rounded-start-2 border-start-start-radius: var(--bs-border-radius);
border-start-end-radius: var(--bs-border-radius);
.rounded-start-3 border-start-start-radius: var(--bs-border-radius-lg);
border-start-end-radius: var(--bs-border-radius-lg);
.rounded-start-4 border-start-start-radius: var(--bs-border-radius-xl);
border-start-end-radius: var(--bs-border-radius-xl);
.rounded-start-5 border-start-start-radius: var(--bs-border-radius-2xl);
border-start-end-radius: var(--bs-border-radius-2xl);
.rounded-start-circle border-start-start-radius: 50%;
border-start-end-radius: 50%;
.rounded-start-pill border-start-start-radius: var(--bs-border-radius-pill);
border-start-end-radius: var(--bs-border-radius-pill);

Radius

Add classes to an element to easily round its corners.

Example rounded image75x75 Example top rounded image75x75 Example right rounded image75x75 Example bottom rounded image75x75 Example left rounded image75x75
HTML
<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-end" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-start" alt="...">

Sizes

Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 5 including circle and pill, and can be configured by modifying the utilities API.

Example non-rounded image75x75 Example small rounded image75x75 Example default rounded image75x75 Example large rounded image75x75 Example larger rounded image75x75 Example extra large rounded image75x75 Completely round image75x75 Rounded pill image150x75
HTML
<img src="..." class="rounded-0" alt="...">
<img src="..." class="rounded-1" alt="...">
<img src="..." class="rounded-2" alt="...">
<img src="..." class="rounded-3" alt="...">
<img src="..." class="rounded-4" alt="...">
<img src="..." class="rounded-5" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">
Example small rounded image75x75 Example default left rounded image75x75 Example right completely round image75x75 Example left rounded pill image75x75 Example extra large bottom rounded image75x75
HTML
<img src="..." class="rounded-bottom-1" alt="...">
<img src="..." class="rounded-start-2" alt="...">
<img src="..." class="rounded-end-circle" alt="...">
<img src="..." class="rounded-start-pill" alt="...">
<img src="..." class="rounded-5 rounded-top-0" alt="...">

CSS

Variables

SCSS
--border-radius: #{$border-radius};
--border-radius-sm: #{$border-radius-sm};
--border-radius-lg: #{$border-radius-lg};
--border-radius-xl: #{$border-radius-xl};
--border-radius-2xl: #{$border-radius-2xl};
--border-radius-pill: #{$border-radius-pill};

Sass variables

SCSS
$border-radius:               .5rem;
$border-radius-sm:            .375rem;
$border-radius-lg:            .75rem;
$border-radius-xl:            1rem;
$border-radius-2xl:           2rem;
$border-radius-pill:          50rem;

Sass maps

Sass mixins

SCSS
@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-start-start-radius: valid-radius($radius);
    border-start-end-radius: valid-radius($radius);
  }
}

@mixin border-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-start-end-radius: valid-radius($radius);
    border-end-end-radius: valid-radius($radius);
  }
}

@mixin border-bottom-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-end-start-radius: valid-radius($radius);
    border-end-end-radius: valid-radius($radius);
  }
}

@mixin border-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-start-start-radius: valid-radius($radius);
    border-end-start-radius: valid-radius($radius);
  }
}

@mixin border-top-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-start-start-radius: valid-radius($radius);
  }
}

@mixin border-top-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-start-end-radius: valid-radius($radius);
  }
}

@mixin border-bottom-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-end-end-radius: valid-radius($radius);
  }
}

@mixin border-bottom-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-end-start-radius: valid-radius($radius);
  }
}

Sass utilities API

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

SCSS
"border-radius": (
  property: border-radius,
  class: rounded,
  values: (
    null: var(--border-radius),
    0: 0,
    1: var(--border-radius-sm),
    2: var(--border-radius),
    3: var(--border-radius-lg),
    4: var(--border-radius-xl),
    5: var(--border-radius-2xl),
    circle: 50%,
    pill: var(--border-radius-pill)
  )
),
"rounded-top": (
  property: border-start-start-radius border-start-end-radius,
  class: rounded-top,
  values: (
    null: var(--border-radius),
    0: 0,
    1: var(--border-radius-sm),
    2: var(--border-radius),
    3: var(--border-radius-lg),
    4: var(--border-radius-xl),
    5: var(--border-radius-2xl),
    circle: 50%,
    pill: var(--border-radius-pill)
  )
),
"rounded-end": (
  property: border-end-end-radius border-end-start-radius,
  class: rounded-end,
  values: (
    null: var(--border-radius),
    0: 0,
    1: var(--border-radius-sm),
    2: var(--border-radius),
    3: var(--border-radius-lg),
    4: var(--border-radius-xl),
    5: var(--border-radius-2xl),
    circle: 50%,
    pill: var(--border-radius-pill)
  )
),
"rounded-bottom": (
  property: border-end-end-radius border-end-start-radius,
  class: rounded-bottom,
  values: (
    null: var(--border-radius),
    0: 0,
    1: var(--border-radius-sm),
    2: var(--border-radius),
    3: var(--border-radius-lg),
    4: var(--border-radius-xl),
    5: var(--border-radius-2xl),
    circle: 50%,
    pill: var(--border-radius-pill)
  )
),
"rounded-start": (
  property: border-start-start-radius border-start-end-radius,
  class: rounded-start,
  values: (
    null: var(--border-radius),
    0: 0,
    1: var(--border-radius-sm),
    2: var(--border-radius),
    3: var(--border-radius-lg),
    4: var(--border-radius-xl),
    5: var(--border-radius-2xl),
    circle: 50%,
    pill: var(--border-radius-pill)
  )
),