Jump to main content

Shapes

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

Circle

.circle

Rounded

.rounded

portrait
<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
.radius *
.radius-2
.radius-4
.radius-6
.radius-8
.radius-10
.radius-12
.radius-14
.radius-16
.radius-18
.radius-20

*) 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