diff --git a/scss/_variables.scss b/scss/_variables.scss index 1e6c32adc7..e721c2a65b 100644 --- a/scss/_variables.scss +++ b/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; diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss index b8832ef728..fb759c9ba0 100644 --- a/scss/utilities/_borders.scss +++ b/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; } diff --git a/site/docs/4.1/utilities/borders.md b/site/docs/4.1/utilities/borders.md index e67cc41c9e..c0f68eb582 100644 --- a/site/docs/4.1/utilities/borders.md +++ b/site/docs/4.1/utilities/borders.md @@ -61,6 +61,7 @@ Add classes to an element to easily round its corners. Example bottom rounded image Example left rounded image Completely round image + Rounded pill image Example non-rounded image (overrides rounding applied elsewhere) @@ -71,5 +72,6 @@ Add classes to an element to easily round its corners. ... ... ... +... ... {% endhighlight %}