---
title: Rounding Utilities
description: Border radius utilities set an element's border radius property.
tags: ["utilities"]
status: wip
---

<style>
  .preview-block {
    background-color: var(--wa-color-neutral-fill-loud);
    min-block-size: 2em;
  }
</style>

Web Awesome includes classes to set an element's `border-radius` property. They can be used alongside Web Awesome layout utilities, like [frame](/docs/layout/frame), to round all corners of an element.

Each class corresponds to one of the [`--wa-border-radius-*`](/docs/tokens/borders/#radius) tokens in your theme.

| Class Name                | `border-radius` Value       | Preview                                                                                 |
| ------------------------- | --------------------------- | --------------------------------------------------------------------------------------- |
| `wa-border-radius-s`     | `--wa-border-radius-s`     | <div class="preview-block" style="border-radius: var(--wa-border-radius-s)"></div>     |
| `wa-border-radius-m`      | `--wa-border-radius-m`      | <div class="preview-block" style="border-radius: var(--wa-border-radius-m)"></div>      |
| `wa-border-radius-l`      | `--wa-border-radius-l`      | <div class="preview-block" style="border-radius: var(--wa-border-radius-l)"></div>      |
| `wa-border-radius-pill`   | `--wa-border-radius-pill`   | <div class="preview-block" style="border-radius: var(--wa-border-radius-pill)"></div>   |
| `wa-border-radius-circle` | `--wa-border-radius-circle` | <div class="preview-block" style="border-radius: var(--wa-border-radius-circle)"></div> |
| `wa-border-radius-square` | `--wa-border-radius-square` | <div class="preview-block" style="border-radius: var(--wa-border-radius-square)"></div> |

