Updated rounded utilities to fix scale, but not rename anything else

twbs · Oct 28, 2020 · 7af45bb · 7af45bb
1 parent 3e2f9ab
commit 7af45bb
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git 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: $rounded-pill
       )
     ),
     "rounded-top": (

diff --git 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.
 <span class="border border-white"></span>
 {{< /example >}}
 
-### Border-width
+## Border-width
 
 {{< example class="bd-example-border-utils" >}}
 <span class="border border-1"></span>
@@ -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 the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `3`.
 
-Use `.rounded-lg` or `.rounded-sm` for larger or smaller border-radius.
-
-{{< 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" >}}
+{{< example >}}
+{{< 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 >}}