diff options
| -rw-r--r-- | scss/utilities/_borders.scss | 12 | ||||
| -rw-r--r-- | site/docs/4.2/utilities/borders.md | 14 |
2 files changed, 26 insertions, 0 deletions
diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss index 78c9cb5b2..302f6bf84 100644 --- a/scss/utilities/_borders.scss +++ b/scss/utilities/_borders.scss @@ -30,26 +30,38 @@ // Border-radius // +.rounded-sm { + border-radius: $border-radius-sm !important; +} + .rounded { border-radius: $border-radius !important; } + .rounded-top { border-top-left-radius: $border-radius !important; border-top-right-radius: $border-radius !important; } + .rounded-right { border-top-right-radius: $border-radius !important; border-bottom-right-radius: $border-radius !important; } + .rounded-bottom { border-bottom-right-radius: $border-radius !important; border-bottom-left-radius: $border-radius !important; } + .rounded-left { border-top-left-radius: $border-radius !important; border-bottom-left-radius: $border-radius !important; } +.rounded-lg { + border-radius: $border-radius-lg !important; +} + .rounded-circle { border-radius: 50% !important; } diff --git a/site/docs/4.2/utilities/borders.md b/site/docs/4.2/utilities/borders.md index 0cf2f9c3c..ebb59fb65 100644 --- a/site/docs/4.2/utilities/borders.md +++ b/site/docs/4.2/utilities/borders.md @@ -75,3 +75,17 @@ Add classes to an element to easily round its corners. <img src="..." alt="..." class="rounded-pill"> <img src="..." alt="..." class="rounded-0"> {% endhighlight %} + +## Sizes + +Use `.rounded-lg` or `.rounded-sm` for larger or smaller border-radius. + +<div class="bd-example bd-example-images"> + {%- include icons/placeholder.svg width="75" height="75" class="rounded-sm" title="Example small rounded image" -%} + {%- include icons/placeholder.svg width="75" height="75" class="rounded-lg" title="Example large rounded image" -%} +</div> + +{% highlight html %} +<img src="..." alt="..." class="rounded-sm"> +<img src="..." alt="..." class="rounded-lg"> +{% endhighlight %} |