All

none (ie. square)

• class: cnr:arch-x
• css: border-radius: 0%;

extra small

• class: cnr:arch-x-sm
• css: border-radius: 0.1666rem;

small

• class: cnr:arch-sm
• css: border-radius: 0.3333rem;

medium

• class: cnr:arch-md
• css: border-radius: 0.6666rem;

large

• class: cnr:arch-lg
• css: border-radius: 1rem;

round

• class: cnr:arch-rd
• css: border-radius: 50%;

Bottom

extra small

• class: cnr:arch-bt-x-sm
• css: border-radius: 0 0 0.1666rem 0.1666rem;

small

• class: cnr:arch-bt-sm
• css: border-radius: 0 0 0.3333rem 0.3333rem;

medium

• class: cnr:arch-bt-md
• css: border-radius: 0 0 0.6666rem 0.6666rem;

large

• class: cnr:arch-bt-lg
• css: border-radius: 0 0 1rem 1rem;

Left

extra small

• class: cnr:arch-lt-x-sm
• css: border-radius: 0.1666rem 0 0 0.1666rem;

small

• class: cnr:arch-lt-sm
• css: border-radius: 0.3333rem 0 0 0.3333rem;

medium

• class: cnr:arch-lt-md
• css: border-radius: 0.6666rem 0 0 0.6666rem;

large

• class: cnr:arch-lt-lg
• css: border-radius: 1rem 0 0 1rem;

Right

extra small

• class: cnr:arch-rt-x-sm
• css: border-radius: 0 0.1666rem 0.1666rem 0;

small

• class: cnr:arch-rt-sm
• css: border-radius: 0 0.3333rem 0.3333rem 0;

medium

• class: cnr:arch-rt-md
• css: border-radius: 0 0.6666rem 0.6666rem 0;

large

• class: cnr:arch-rt-lg
• css: border-radius: 0 1rem 1rem 0;

Abbreviations

Supported media

Notes

All corner classes begin with “cnr” and are separated by a colon from it’s value. By default corners are square.