Skip to main contentSkip to docs navigation

Border radius

Use border radius…

MDNMDN Reference
View & Edit
On this page
ClassStyles
.rounded-0--bs-rounded-size: 0;
border-radius: var(--bs-rounded-size);
.rounded-1--bs-rounded-size: 0.125rem;
border-radius: var(--bs-rounded-size);
.rounded-2--bs-rounded-size: 0.1875rem;
border-radius: var(--bs-rounded-size);
.rounded-3--bs-rounded-size: 0.25rem;
border-radius: var(--bs-rounded-size);
.rounded-4--bs-rounded-size: 0.375rem;
border-radius: var(--bs-rounded-size);
.rounded-5--bs-rounded-size: 0.5rem;
border-radius: var(--bs-rounded-size);
.rounded-6--bs-rounded-size: 0.625rem;
border-radius: var(--bs-rounded-size);
.rounded-7--bs-rounded-size: 0.75rem;
border-radius: var(--bs-rounded-size);
.rounded-8--bs-rounded-size: 1rem;
border-radius: var(--bs-rounded-size);
.rounded-9--bs-rounded-size: 1.5rem;
border-radius: var(--bs-rounded-size);
.rounded--bs-rounded-size: 0.5rem;
border-radius: var(--bs-rounded-size);
.rounded-circle--bs-rounded-size: 50%;
border-radius: var(--bs-rounded-size);
.rounded-pill--bs-rounded-size: var(--bs-radius-pill);
border-radius: var(--bs-rounded-size);
.rounded-top-0border-start-start-radius: 0;
border-start-end-radius: 0;
.rounded-top-1border-start-start-radius: 0.125rem;
border-start-end-radius: 0.125rem;
.rounded-top-2border-start-start-radius: 0.1875rem;
border-start-end-radius: 0.1875rem;
.rounded-top-3border-start-start-radius: 0.25rem;
border-start-end-radius: 0.25rem;
.rounded-top-4border-start-start-radius: 0.375rem;
border-start-end-radius: 0.375rem;
.rounded-top-5border-start-start-radius: 0.5rem;
border-start-end-radius: 0.5rem;
.rounded-top-6border-start-start-radius: 0.625rem;
border-start-end-radius: 0.625rem;
.rounded-top-7border-start-start-radius: 0.75rem;
border-start-end-radius: 0.75rem;
.rounded-top-8border-start-start-radius: 1rem;
border-start-end-radius: 1rem;
.rounded-top-9border-start-start-radius: 1.5rem;
border-start-end-radius: 1.5rem;
.rounded-topborder-start-start-radius: var(--bs-rounded-size, var(--bs-radius-5));
border-start-end-radius: var(--bs-rounded-size, var(--bs-radius-5));
.rounded-top-circleborder-start-start-radius: 50%;
border-start-end-radius: 50%;
.rounded-top-pillborder-start-start-radius: var(--bs-radius-pill);
border-start-end-radius: var(--bs-radius-pill);
.rounded-end-0border-start-end-radius: 0;
border-end-end-radius: 0;
.rounded-end-1border-start-end-radius: 0.125rem;
border-end-end-radius: 0.125rem;
.rounded-end-2border-start-end-radius: 0.1875rem;
border-end-end-radius: 0.1875rem;
.rounded-end-3border-start-end-radius: 0.25rem;
border-end-end-radius: 0.25rem;
.rounded-end-4border-start-end-radius: 0.375rem;
border-end-end-radius: 0.375rem;
.rounded-end-5border-start-end-radius: 0.5rem;
border-end-end-radius: 0.5rem;
.rounded-end-6border-start-end-radius: 0.625rem;
border-end-end-radius: 0.625rem;
.rounded-end-7border-start-end-radius: 0.75rem;
border-end-end-radius: 0.75rem;
.rounded-end-8border-start-end-radius: 1rem;
border-end-end-radius: 1rem;
.rounded-end-9border-start-end-radius: 1.5rem;
border-end-end-radius: 1.5rem;
.rounded-endborder-start-end-radius: var(--bs-rounded-size, var(--bs-radius-5));
border-end-end-radius: var(--bs-rounded-size, var(--bs-radius-5));
.rounded-end-circleborder-start-end-radius: 50%;
border-end-end-radius: 50%;
.rounded-end-pillborder-start-end-radius: var(--bs-radius-pill);
border-end-end-radius: var(--bs-radius-pill);
.rounded-bottom-0border-end-start-radius: 0;
border-end-end-radius: 0;
.rounded-bottom-1border-end-start-radius: 0.125rem;
border-end-end-radius: 0.125rem;
.rounded-bottom-2border-end-start-radius: 0.1875rem;
border-end-end-radius: 0.1875rem;
.rounded-bottom-3border-end-start-radius: 0.25rem;
border-end-end-radius: 0.25rem;
.rounded-bottom-4border-end-start-radius: 0.375rem;
border-end-end-radius: 0.375rem;
.rounded-bottom-5border-end-start-radius: 0.5rem;
border-end-end-radius: 0.5rem;
.rounded-bottom-6border-end-start-radius: 0.625rem;
border-end-end-radius: 0.625rem;
.rounded-bottom-7border-end-start-radius: 0.75rem;
border-end-end-radius: 0.75rem;
.rounded-bottom-8border-end-start-radius: 1rem;
border-end-end-radius: 1rem;
.rounded-bottom-9border-end-start-radius: 1.5rem;
border-end-end-radius: 1.5rem;
.rounded-bottomborder-end-start-radius: var(--bs-rounded-size, var(--bs-radius-5));
border-end-end-radius: var(--bs-rounded-size, var(--bs-radius-5));
.rounded-bottom-circleborder-end-start-radius: 50%;
border-end-end-radius: 50%;
.rounded-bottom-pillborder-end-start-radius: var(--bs-radius-pill);
border-end-end-radius: var(--bs-radius-pill);
.rounded-start-0border-start-start-radius: 0;
border-end-start-radius: 0;
.rounded-start-1border-start-start-radius: 0.125rem;
border-end-start-radius: 0.125rem;
.rounded-start-2border-start-start-radius: 0.1875rem;
border-end-start-radius: 0.1875rem;
.rounded-start-3border-start-start-radius: 0.25rem;
border-end-start-radius: 0.25rem;
.rounded-start-4border-start-start-radius: 0.375rem;
border-end-start-radius: 0.375rem;
.rounded-start-5border-start-start-radius: 0.5rem;
border-end-start-radius: 0.5rem;
.rounded-start-6border-start-start-radius: 0.625rem;
border-end-start-radius: 0.625rem;
.rounded-start-7border-start-start-radius: 0.75rem;
border-end-start-radius: 0.75rem;
.rounded-start-8border-start-start-radius: 1rem;
border-end-start-radius: 1rem;
.rounded-start-9border-start-start-radius: 1.5rem;
border-end-start-radius: 1.5rem;
.rounded-startborder-start-start-radius: var(--bs-rounded-size, var(--bs-radius-5));
border-end-start-radius: var(--bs-rounded-size, var(--bs-radius-5));
.rounded-start-circleborder-start-start-radius: 50%;
border-end-start-radius: 50%;
.rounded-start-pillborder-start-start-radius: var(--bs-radius-pill);
border-end-start-radius: var(--bs-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="...">

Mixing

Use .rounded-size-{n} to set the radius size without rounding all corners. Combine it with side classes like .rounded-top or .rounded-end to round only specific sides at that size. Because these use CSS variables for sizing, you may need to apply additional classes to nested elements to prevent inheritance.

Top corners only, size 675x75 Top and end corners, size 675x75 Top and bottom, size 375x75 Top corners only, pill75x75
HTML
<img src="..." class="rounded-size-6 rounded-top" alt="...">
<img src="..." class="rounded-size-6 rounded-top rounded-end" alt="...">
<img src="..." class="rounded-size-3 rounded-top rounded-bottom" alt="...">
<img src="..." class="rounded-size-pill rounded-top" alt="...">

When .rounded-{n} is used alongside a side class, the number sets the --rounded-size variable that the side class inherits.

All corners size 6, bottom corners removed75x75 All corners size 3, top corners stay size 3 via --rounded-size75x75
HTML
<img src="..." class="rounded-6 rounded-bottom-0" alt="...">
<img src="..." class="rounded-3 rounded-top" alt="...">

CSS

Variables

Radius tokens are generated from the $spacers map in scss/_root.scss. Learn how to use the root tokens.

scss/_root.scss
@each $key, $value in $spacers {
  $root-tokens: map.set($root-tokens, --spacer-#{$key}, $value);
}

The --rounded-size local CSS variable is set by .rounded-{n} and .rounded-size-{n} and consumed by the side utilities (.rounded-top, .rounded-end, .rounded-bottom, .rounded-start) as their default radius. You can also set it directly in your own CSS or via an inline style to control the side utilities from a single point.

Sass maps

Sass mixins

scss/mixins/_border-radius.scss
@mixin border-radius($radius: var(--radius-5), $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: var(--radius-5)) {
  @if $enable-rounded {
    border-start-start-radius: valid-radius($radius);
    border-start-end-radius: valid-radius($radius);
  }
}

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

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

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

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

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

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

@mixin border-bottom-start-radius($radius: var(--radius-5)) {
  @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/_utilities.scss
"border-radius": (
  property: (
    "--rounded-size": null,
    "border-radius": var(--rounded-size)
  ),
  class: rounded,
  values: map.merge(
    $radii,
    (
      null: map.get($radii, 5),
      circle: 50%,
      pill: var(--radius-pill)
    )
  )
),
"rounded-size": (
  property: --rounded-size,
  class: rounded-size,
  values: map.merge(
    $radii,
    (
      null: map.get($radii, 5),
      circle: 50%,
      pill: var(--radius-pill)
    )
  )
),
"rounded-top": (
  property: border-start-start-radius border-start-end-radius,
  class: rounded-top,
  values: map.merge(
    $radii,
    (
      null: var(--rounded-size, var(--radius-5)),
      circle: 50%,
      pill: var(--radius-pill)
    )
  )
),
"rounded-end": (
  property: border-start-end-radius border-end-end-radius,
  class: rounded-end,
  values: map.merge(
    $radii,
    (
      null: var(--rounded-size, var(--radius-5)),
      circle: 50%,
      pill: var(--radius-pill)
    )
  )
),
"rounded-bottom": (
  property: border-end-start-radius border-end-end-radius,
  class: rounded-bottom,
  values: map.merge(
    $radii,
    (
      null: var(--rounded-size, var(--radius-5)),
      circle: 50%,
      pill: var(--radius-pill)
    )
  )
),
"rounded-start": (
  property: border-start-start-radius border-end-start-radius,
  class: rounded-start,
  values: map.merge(
    $radii,
    (
      null: var(--rounded-size, var(--radius-5)),
      circle: 50%,
      pill: var(--radius-pill)
    )
  )
),