diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 21ff560665..481eaa82f8 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -497,11 +497,12 @@ $utilities: map-merge(
class: rounded,
values: (
null: $border-radius,
- sm: $border-radius-sm,
- lg: $border-radius-lg,
- circle: 50%,
- pill: $rounded-pill,
0: 0,
+ 1: $border-radius-sm,
+ 2: $border-radius,
+ 3: $border-radius-lg,
+ circle: 50%,
+ pill: $border-radius-pill
)
),
"rounded-top": (
diff --git a/scss/_variables.scss b/scss/_variables.scss
index c98c500a20..4c6c4dd21d 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -345,11 +345,6 @@ $container-padding-x: $grid-gutter-width !default;
// Define common padding and border radius sizes and more.
$border-width: 1px !default;
-$border-color: $gray-300 !default;
-
-$border-radius: .25rem !default;
-$border-radius-sm: .2rem !default;
-$border-radius-lg: .3rem !default;
$border-widths: (
0: 0,
1: 1px,
@@ -359,7 +354,12 @@ $border-widths: (
5: 5px
) !default;
-$rounded-pill: 50rem !default;
+$border-color: $gray-300 !default;
+
+$border-radius: .25rem !default;
+$border-radius-sm: .2rem !default;
+$border-radius-lg: .3rem !default;
+$border-radius-pill: 50rem !default;
$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
diff --git a/site/content/docs/5.0/utilities/borders.md b/site/content/docs/5.0/utilities/borders.md
index ec2a7cbc04..ceb140ecb7 100644
--- a/site/content/docs/5.0/utilities/borders.md
+++ b/site/content/docs/5.0/utilities/borders.md
@@ -43,7 +43,7 @@ Change the border color using utilities built on our theme colors.
{{< /example >}}
-### Border-width
+## Border-width
{{< example class="bd-example-border-utils" >}}
@@ -65,15 +65,15 @@ Add classes to an element to easily round its corners.
{{< placeholder width="75" height="75" class="rounded-left" title="Example left rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
-{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image (overrides rounding applied elsewhere)" >}}
{{< /example >}}
+### Sizes
-## Sizes
-
-Use `.rounded-lg` or `.rounded-sm` for larger or smaller border-radius.
+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.
{{< example class="bd-example-rounded-utils" >}}
-{{< placeholder width="75" height="75" class="rounded-sm" title="Example small rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-lg" title="Example large rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" >}}
{{< /example >}}