diff --git a/scss/_modal.scss b/scss/_modal.scss index 1a5b9fdaf9..9942678ae8 100644 --- 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 b3268c1e9e..79e0793a75 100644 --- 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;