Border Radius
The border-radius CSS property rounds the corners of an element's outer border edge.
Usage
Place the border utility class on an element that you want to change the border property for.
You can set a single radius to make circular corners, or two radii to make elliptical corners.
Modifier selectors
| Modifier selector | Description |
|---|---|
slb-border-radius-0 |
Remove border radius |
slb-border-radius-3 |
3px border radius |
slb-border-radius-6 |
6px border radius |
slb-border-radius-50 |
50% border radius |
slb-border-{top-left/top-right/bottom-left/bottom-right}-radius-0 |
Remove border radius |
slb-border-{top-left/top-right/bottom-left/bottom-right}-radius-3 |
3px border radius |
slb-border-{top-left/top-right/bottom-left/bottom-right}-radius-6 |
6px border radius |
slb-border-{top-left/top-right/bottom-left/bottom-right}-radius-50 |
50% border radius |
.slb-border-radius-0 - Remove Border radius.
.slb-border-radius-3 - 3px Border radius.
.slb-border-radius-6 - 6px Border radius.
.slb-border-radius-50 - 50% Border radius.
.slb-border-top-left-radius-0 - Remove top left Border radius.
.slb-border-top-left-radius-3 - 3px top left Border radius.
.slb-border-top-left-radius-6 - 6px top left Border radius.
.slb-border-top-left-radius-50 - 50% top left Border radius.
.slb-border-top-right-radius-0 - Remove top right Border radius.
.slb-border-top-right-radius-3 - 3px top right Border radius.
.slb-border-top-right-radius-6 - 6px top right Border radius.
.slb-border-top-right-radius-50 - 50% top right Border radius.
.slb-border-bottom-left-radius-0 - Remove bottom left Border radius.
.slb-border-bottom-left-radius-3 - 3px bottom left Border radius.
.slb-border-bottom-left-radius-6 - 6px bottom left Border radius.
.slb-border-bottom-left-radius-50 - 50% bottom left Border radius.
.slb-border-bottom-right-radius-0 - Remove bottom right Border radius.
.slb-border-bottom-right-radius-3 - 3px bottom right Border radius.
.slb-border-bottom-right-radius-6 - 6px bottom right Border radius.
.slb-border-bottom-right-radius-50 - 50% bottom right Border radius.
utilities\border\util-border-radius.hbs
<div class="[modifier class] slb-b-2 slb-border-blue" style="height: 100px; width: 100px;">
</div>
Source:
utilities/utils/_border-radius-utils.scss