Get Orange

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.

SCSS

    $border-radius-base: 3px;

$border-radiuses: (
  0: 0,                         // 0px
  'base': $border-radius-base,  // 3px
  1: $border-radius-base * 2,   // 6px
  'full': 50%                   // 50%
);

Styles

HTML

    <img class="image rounded-0" src="https://orangecss.com/images/thumbnails/square/fox-square.jpg" alt="Doggo" />

<img class="image rounded" src="https://orangecss.com/images/thumbnails/square/cat-square.jpg" alt="Doggo" />

<img class="image rounded-1" src="https://orangecss.com/images/thumbnails/square/hedgehog-square.jpg" alt="Hedgehog" />

<img class="image rounded-full" src="https://orangecss.com/images/thumbnails/square/dog-square.jpg" alt="Katze" />

Border Radius

Styles