# Border Radius

Apply rounded corners to an element with the border radius utility.

The border radius utility supports default, pill, and circle radiuses, which set `border-radius` to `3px`, `9999px` and `100%` respectively.

**Format**: `.ds-u-radius--[pill|circle]`

<EmbeddedExample>
  <section>
    <article class="ds-u-margin-top--2">
      <code class="ds-u-margin-bottom--1">.ds-u-radius</code>
      <div class="ds-u-radius ds-u-fill--secondary ds-u-padding--2" style={{ width: 100 }}></div>
    </article>
    <article class="ds-u-margin-top--2">
      <code class="ds-u-margin-bottom--1">.ds-u-radius--pill</code>
      <div
        class="ds-u-radius--pill ds-u-fill--secondary ds-u-padding--2"
        style={{ width: 100 }}
      ></div>
    </article>
    <article class="ds-u-margin-top--2">
      <code class="ds-u-margin-bottom--1">.ds-u-radius--circle</code>
      <div class="ds-u-radius--circle ds-u-fill--secondary" style={{ width: 50, height: 50 }}></div>
    </article>
  </section>
</EmbeddedExample>

## Guidance

### Style customization

The following CSS variables can be overridden to theme the border radius utility:

- `--border-radius`