diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss index 78c9cb5b2d..302f6bf849 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 0cf2f9c3c1..ebb59fb651 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. ... ... {% endhighlight %} + +## Sizes + +Use `.rounded-lg` or `.rounded-sm` for larger or smaller border-radius. + +
+ {%- 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" -%} +
+ +{% highlight html %} +... +... +{% endhighlight %}