Values that define border radius of element.
SCSS
recall border radius with rounded({key})
function
HTML
apply border radius to elements with .rounded-{key}
class.
$o-border-radius-base: 3px;
$o-border-radiuses: (
0: 0, // 0px
'base': $o-border-radius-base, // 3px
1: $o-border-radius-base * 2, // 6px
'full': 50% // 50%
);
<img class="o-image rounded-0" src="https://orangecss.com/images/thumbnails/square/fox-square.jpg" alt="Doggo" />
<img class="o-image rounded" src="https://orangecss.com/images/thumbnails/square/cat-square.jpg" alt="Doggo" />
<img class="o-image rounded-1" src="https://orangecss.com/images/thumbnails/square/hedgehog-square.jpg" alt="Hedgehog" />
<img class="o-image rounded-full" src="https://orangecss.com/images/thumbnails/square/dog-square.jpg" alt="Katze" />