Add new rounded sizes classes (#28011)

* update border-radius mixins

Add $enable-rounded as a keyword argument to border-raidus mixins

* Update rounded classes

- use border-radius mixins to repleace !important
- use true for $enable-rounded for rounded classes
- Add `.rounded-sm` and `.rounded-sm`  #27934

* update borders docs

* Revert touch of dist files

* Revert change of border-radius mixins

* use !important in border-radius utilies classes

* update border radius classes keep only rounded-lg and rounded-sm

Author: jt143

scss/utilities/_borders.scss

@@ -30,26 +30,38 @@
 // Border-radius
 //
 
+.rounded-sm {
+  border-radius: $border-radius-sm !important;
+}
+
 .rounded {
   border-radius: $border-radius !important;
 }
+
 .rounded-top {
   border-top-left-radius: $border-radius !important;
   border-top-right-radius: $border-radius !important;
 }
+
 .rounded-right {
   border-top-right-radius: $border-radius !important;
   border-bottom-right-radius: $border-radius !important;
 }
+
 .rounded-bottom {
   border-bottom-right-radius: $border-radius !important;
   border-bottom-left-radius: $border-radius !important;
 }
+
 .rounded-left {
   border-top-left-radius: $border-radius !important;
   border-bottom-left-radius: $border-radius !important;
 }
 
+.rounded-lg {
+  border-radius: $border-radius-lg !important;
+}
+
 .rounded-circle {
   border-radius: 50% !important;
 }

site/docs/4.2/utilities/borders.md

@@ -75,3 +75,17 @@ Add classes to an element to easily round its corners.
 <img src="..." alt="..." class="rounded-pill">
 <img src="..." alt="..." class="rounded-0">
 {% endhighlight %}
+
+## Sizes
+
+Use `.rounded-lg` or `.rounded-sm` for larger or smaller border-radius.
+
+<div class="bd-example bd-example-images">
+  {%- include icons/placeholder.svg width="75" height="75" class="rounded-sm" title="Example small rounded image" -%}
+  {%- include icons/placeholder.svg width="75" height="75" class="rounded-lg" title="Example large rounded image" -%}
+</div>
+
+{% highlight html %}
+<img src="..." alt="..." class="rounded-sm">
+<img src="..." alt="..." class="rounded-lg">
+{% endhighlight %}