Calc modal header/footer border radius according to the border width (#28775)

diff --git a/scss/_modal.scss b/scss/_modal.scss
index 1a5b9fdaf935d5668c8c8e59c4a828122693db13..9942678ae8cfdbfae796df62ed7b0efe524d8431 100644 (file)
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -138,7 +138,7 @@
   justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
   padding: $modal-header-padding;
   border-bottom: $modal-header-border-width solid $modal-header-border-color;
-  @include border-top-radius($modal-content-border-radius);
+  @include border-top-radius($modal-content-inner-border-radius);
 
   .close {
     padding: $modal-header-padding;
@@ -170,7 +170,7 @@
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
   padding: $modal-inner-padding;
   border-top: $modal-footer-border-width solid $modal-footer-border-color;
-  @include border-bottom-radius($modal-content-border-radius);
+  @include border-bottom-radius($modal-content-inner-border-radius);
 
   // Easily place margin between footer elements
   > :not(:first-child) { margin-left: .25rem; }

diff --git a/scss/_variables.scss b/scss/_variables.scss
index b3268c1e9e6bb4752fc55ff7c5fcc70325585d15..79e0793a755939f8a4d9b7572eada3a00c0f5651 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -936,6 +936,7 @@ $modal-content-bg:                  $white !default;
 $modal-content-border-color:        rgba($black, .2) !default;
 $modal-content-border-width:        $border-width !default;
 $modal-content-border-radius:       $border-radius-lg !default;
+$modal-content-inner-border-radius: calc(#{$modal-content-border-radius} - #{$modal-content-border-width}) !default;
 $modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .5) !default;
 $modal-content-box-shadow-sm-up:    0 .5rem 1rem rgba($black, .5) !default;