Add new `.rounded-pill` utility (#27339)

scss/_variables.scss

@@ -244,6 +244,8 @@ $border-radius:               .25rem !default;
 $border-radius-lg:            .3rem !default;
 $border-radius-sm:            .2rem !default;
 
+$rounded-pill:                50rem !default;
+
 $box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
 $box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
 $box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;

scss/utilities/_borders.scss

@@ -54,6 +54,10 @@
   border-radius: 50% !important;
 }
 
+.rounded-pill {
+  border-radius: $rounded-pill !important;
+}
+
 .rounded-0 {
   border-radius: 0 !important;
 }

site/docs/4.1/utilities/borders.md

@@ -61,6 +61,7 @@ Add classes to an element to easily round its corners.
   <img data-src="holder.js/75x75" class="rounded-bottom" alt="Example bottom rounded image">
   <img data-src="holder.js/75x75" class="rounded-left" alt="Example left rounded image">
   <img data-src="holder.js/75x75" class="rounded-circle" alt="Completely round image">
+  <img data-src="holder.js/150x75" class="rounded-pill" alt="Rounded pill image">
   <img data-src="holder.js/75x75" class="rounded-0" alt="Example non-rounded image (overrides rounding applied elsewhere)">
 </div>
 
@@ -71,5 +72,6 @@ Add classes to an element to easily round its corners.
 <img src="..." alt="..." class="rounded-bottom">
 <img src="..." alt="..." class="rounded-left">
 <img src="..." alt="..." class="rounded-circle">
+<img src="..." alt="..." class="rounded-pill">
 <img src="..." alt="..." class="rounded-0">
 {% endhighlight %}