Shapes

File location: sass/layout/helpers/_utilities.scss (GitHub)

Hi there!

<img 
  class="border-gray-dark border-3px circle" 
  src="/img/portrait.jpg"
  alt="Portrait of a bearded man"
>

<button class="rounded">
  Hi there!
</button>

Border Radius

*) Customizable default, 6px. Modify the $border-radius variable in the @use rule when integrating hgrid in your project, or overwrite the .radius class in your CSS.

Border Radius Variants

• .radius-top-2 – .radius-top-4 ... .radius-top-20
• .radius-bottom-2 – .radius-bottom-4 ... .radius-bottom-20
• .radius-left-2 – .radius-left-4 ... .radius-left-20
• .radius-right-2 – .radius-right-4 ... .radius-right-20
• .no-radius

← Previous: Lines & Borders

Next: Box Shadow →