Blacklist border-radius property (use mixin instead) (#27900)

8 files changed, 23 insertions, 25 deletions

diff --git a/scss/_card.scss b/scss/_card.scss
index 377bec0f1a..bbdb15bce5 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -200,10 +200,12 @@
 
           .card-img-top,
           .card-header {
+            // stylelint-disable-next-line property-blacklist
             border-top-right-radius: 0;
           }
           .card-img-bottom,
           .card-footer {
+            // stylelint-disable-next-line property-blacklist
             border-bottom-right-radius: 0;
           }
         }
@@ -213,10 +215,12 @@
 
           .card-img-top,
           .card-header {
+            // stylelint-disable-next-line property-blacklist
             border-top-left-radius: 0;
           }
           .card-img-bottom,
           .card-footer {
+            // stylelint-disable-next-line property-blacklist
             border-bottom-left-radius: 0;
           }
         }
@@ -283,24 +287,22 @@
 
     &:not(:first-of-type) {
       .card-header:first-child {
-        border-radius: 0;
+        @include border-radius(0);
       }
 
       &:not(:last-of-type) {
         border-bottom: 0;
-        border-radius: 0;
+        @include border-radius(0);
       }
     }
 
     &:first-of-type {
       border-bottom: 0;
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
+      @include border-bottom-radius(0);
     }
 
     &:last-of-type {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
+      @include border-top-radius(0);
     }
 
     .card-header {
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index e6bf7ad6f5..985dddba42 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -144,6 +144,7 @@
 
 .custom-radio {
   .custom-control-label::before {
+    // stylelint-disable-next-line property-blacklist
     border-radius: $custom-radio-indicator-border-radius;
   }
 
@@ -173,6 +174,7 @@
       left: -($custom-switch-width + $custom-control-gutter);
       width: $custom-switch-width;
       pointer-events: all;
+      // stylelint-disable-next-line property-blacklist
       border-radius: $custom-switch-indicator-border-radius;
     }
 
@@ -182,6 +184,7 @@
       width: $custom-switch-indicator-size;
       height: $custom-switch-indicator-size;
       background-color: $custom-control-indicator-border-color;
+      // stylelint-disable-next-line property-blacklist
       border-radius: $custom-switch-indicator-border-radius;
       @include transition(transform .15s ease-in-out, $custom-forms-transition);
     }
@@ -220,11 +223,7 @@
   background: $custom-select-background;
   background-color: $custom-select-bg;
   border: $custom-select-border-width solid $custom-select-border-color;
-  @if $enable-rounded {
-    border-radius: $custom-select-border-radius;
-  } @else {
-    border-radius: 0;
-  }
+  @include border-radius($custom-select-border-radius, 0);
   @include box-shadow($custom-select-box-shadow);
   appearance: none;
 
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 2db6d834cd..92175b0902 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -18,13 +18,7 @@
   border: $input-border-width solid $input-border-color;
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
-  @if $enable-rounded {
-    // Manually use the if/else instead of the mixin to account for iOS override
-    border-radius: $input-border-radius;
-  } @else {
-    // Otherwise undo the iOS default
-    border-radius: 0;
-  }
+  @include border-radius($input-border-radius, 0);
 
   @include box-shadow($input-box-shadow);
   @include transition($input-transition);
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index d4167cc8ec..10e2273c41 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -297,6 +297,7 @@ label {
 //
 // Details at https://github.com/twbs/bootstrap/issues/24093
 button {
+  // stylelint-disable-next-line property-blacklist
   border-radius: 0;
 }
 
diff --git a/scss/_spinners.scss b/scss/_spinners.scss
index ed7e2bc650..364a5c1a65 100644
--- a/scss/_spinners.scss
+++ b/scss/_spinners.scss
@@ -13,6 +13,7 @@
   vertical-align: text-bottom;
   border: $spinner-border-width solid currentColor;
   border-right-color: transparent;
+  // stylelint-disable-next-line property-blacklist
   border-radius: 50%;
   animation: spinner-border .75s linear infinite;
 }
@@ -42,6 +43,7 @@
   height: $spinner-height;
   vertical-align: text-bottom;
   background-color: currentColor;
+  // stylelint-disable-next-line property-blacklist
   border-radius: 50%;
   opacity: 0;
   animation: spinner-grow .75s linear infinite;
diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss
index 2024febcfa..f32feca90c 100644
--- a/scss/mixins/_border-radius.scss
+++ b/scss/mixins/_border-radius.scss
@@ -1,9 +1,13 @@
+// stylelint-disable property-blacklist
 // Single side border-radius
 
-@mixin border-radius($radius: $border-radius) {
+@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
   @if $enable-rounded {
     border-radius: $radius;
   }
+  @else if $fallback-border-radius != false {
+    border-radius: $fallback-border-radius;
+  }
 }
 
 @mixin border-top-radius($radius) {
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 3e1e2c09d0..64cc482f69 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -103,9 +103,5 @@
   font-size: $font-size;
   line-height: $line-height;
   // Manually declare to provide an override to the browser default
-  @if $enable-rounded {
-    border-radius: $border-radius;
-  } @else {
-    border-radius: 0;
-  }
+  @include border-radius($border-radius, 0);
 }
diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss
index fb759c9ba0..78c9cb5b2d 100644
--- a/scss/utilities/_borders.scss
+++ b/scss/utilities/_borders.scss
@@ -1,4 +1,4 @@
-// stylelint-disable declaration-no-important
+// stylelint-disable property-blacklist, declaration-no-important
 
 //
 // Border