Design System

Border Radius Utilities

border-radius-utilities



Adjust any element's border-radius to the default value or set it to zero. Includes support for all corners, individual corners, and individual sides.

The classes are named using the format: -bor-rad-{sides}-{size}. {sides} can be -a (all), -tl (top left), -tr (top right), -bl (bottom left), -br (bottom right), -t (top left & top right), -r (top right & bottom right), -b (bottom left & bottom right), or -l (top left & bottom left). {size} can be 0 or 1, indicating either zero or the global default value, the $border-radius variable (2px by default).

<div className="gds-container -bor-rad-a-0">
    <p>Container with border-radius: 0</p>
</div>

Optional classes:

  • -bor-rad-a-0
  • -bor-rad-a-1
  • -bor-rad-tl-0
  • -bor-rad-tl-1
  • -bor-rad-tr-0
  • -bor-rad-tr-1
  • -bor-rad-bl-0
  • -bor-rad-bl-1
  • -bor-rad-br-0
  • -bor-rad-br-1
  • -bor-rad-t-0
  • -bor-rad-t-1
  • -bor-rad-r-0
  • -bor-rad-r-1
  • -bor-rad-b-0
  • -bor-rad-b-1
  • -bor-rad-l-0
  • -bor-rad-l-1