> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Border Radius

> Border radius utilities for rounded corners.

export const BorderRadiusDemoCorners = () => {
  const samples = [{
    cls: "rounded-tl-lg",
    style: {
      borderTopLeftRadius: "8px"
    }
  }, {
    cls: "rounded-tr-lg",
    style: {
      borderTopRightRadius: "8px"
    }
  }, {
    cls: "rounded-br-lg",
    style: {
      borderBottomRightRadius: "8px"
    }
  }, {
    cls: "rounded-bl-lg",
    style: {
      borderBottomLeftRadius: "8px"
    }
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="grid grid-cols-2 gap-6 sm:grid-cols-4">
          {samples.map(item => <div key={item.cls} className="flex flex-col items-center gap-3">
              <span className="tw-label">{item.cls}</span>
              <div style={{
    width: "4rem",
    height: "4rem",
    background: "linear-gradient(135deg, #ff4da0, #ff2f92)",
    ...item.style
  }} />
            </div>)}
        </div>
      </div>
    </div>;
};

export const BorderRadiusDemoSides = () => {
  const samples = [{
    cls: "rounded-t-lg",
    style: {
      borderTopLeftRadius: "8px",
      borderTopRightRadius: "8px"
    }
  }, {
    cls: "rounded-r-lg",
    style: {
      borderTopRightRadius: "8px",
      borderBottomRightRadius: "8px"
    }
  }, {
    cls: "rounded-b-lg",
    style: {
      borderBottomLeftRadius: "8px",
      borderBottomRightRadius: "8px"
    }
  }, {
    cls: "rounded-l-lg",
    style: {
      borderTopLeftRadius: "8px",
      borderBottomLeftRadius: "8px"
    }
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="grid grid-cols-2 gap-6 sm:grid-cols-4">
          {samples.map(item => <div key={item.cls} className="flex flex-col items-center gap-3">
              <span className="tw-label">{item.cls}</span>
              <div style={{
    width: "4rem",
    height: "4rem",
    background: "linear-gradient(135deg, #4d98ff, #3b82f6)",
    ...item.style
  }} />
            </div>)}
        </div>
      </div>
    </div>;
};

export const BorderRadiusDemoBasic = () => {
  const samples = [{
    cls: "rounded-sm",
    style: {
      borderRadius: "4px"
    }
  }, {
    cls: "rounded",
    style: {
      borderRadius: "6px"
    }
  }, {
    cls: "rounded-lg",
    style: {
      borderRadius: "8px"
    }
  }, {
    cls: "rounded-xl",
    style: {
      borderRadius: "12px"
    }
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="grid grid-cols-2 gap-6 sm:grid-cols-4">
          {samples.map(item => <div key={item.cls} className="flex flex-col items-center gap-3">
              <span className="tw-label">{item.cls}</span>
              <div style={{
    width: "4rem",
    height: "4rem",
    background: "linear-gradient(135deg, #c05dff, #8b38f6)",
    ...item.style
  }} />
            </div>)}
        </div>
      </div>
    </div>;
};

## Overview

Radius utilities shape corners across buttons, cards, fields, and media. They work with border width, style, and color utilities, but can also be used on borderless surfaces.

| Class           | Value  | CSS                      | Usage                   |
| --------------- | ------ | ------------------------ | ----------------------- |
| `.rounded-none` | 0      | `border-radius: 0;`      | Square corners          |
| `.rounded-sm`   | 4px    | `border-radius: 4px;`    | Tight rounding          |
| `.rounded`      | 6px    | `border-radius: 6px;`    | Standard rounding       |
| `.rounded-lg`   | 8px    | `border-radius: 8px;`    | Comfortable card radius |
| `.rounded-xl`   | 12px   | `border-radius: 12px;`   | Soft, modern surfaces   |
| `.rounded-2xl`  | 16px   | `border-radius: 16px;`   | Display containers      |
| `.rounded-full` | 9999px | `border-radius: 9999px;` | Pills and circles       |

| Pattern                                                                                | Covers           | Typical suffixes                              |
| -------------------------------------------------------------------------------------- | ---------------- | --------------------------------------------- |
| `.rounded-{size}`                                                                      | All four corners | `none`, `sm`, base, `lg`, `xl`, `2xl`, `full` |
| `.rounded-t-{size}`, `.rounded-r-{size}`, `.rounded-b-{size}`, `.rounded-l-{size}`     | One side only    | `sm`, base, `lg`, `xl`                        |
| `.rounded-tl-{size}`, `.rounded-tr-{size}`, `.rounded-br-{size}`, `.rounded-bl-{size}` | One corner only  | `sm`, base, `lg`, `xl`                        |

## Basic Example

Use the base `rounded-*` classes to soften every corner equally.

<BorderRadiusDemoBasic />

```html theme={null}
<div class="rounded-sm"></div>
<div class="rounded"></div>
<div class="rounded-lg"></div>
<div class="rounded-xl"></div>
```

## Rounding Sides Separately

Use side-specific radius helpers when two adjacent corners should share the same rounding.

<BorderRadiusDemoSides />

```html theme={null}
<div class="rounded-t-lg"></div>
<div class="rounded-r-lg"></div>
<div class="rounded-b-lg"></div>
<div class="rounded-l-lg"></div>
```

## Rounding Corners Separately

Use corner-specific helpers when only one corner needs a special treatment.

<BorderRadiusDemoCorners />

```html theme={null}
<div class="rounded-tl-lg"></div>
<div class="rounded-tr-lg"></div>
<div class="rounded-br-lg"></div>
<div class="rounded-bl-lg"></div>
```

## Best Practices

* Use one or two radius sizes across a page so surfaces feel related.
* `rounded` and `rounded-lg` cover most interface needs.
* Use side-only rounding for drawers, pills, and surfaces docked to another edge.
* Use corner-only rounding for badges, cropped media, and asymmetric decorative treatments.
* Reach for `rounded-full` on pills, avatars, and circular badges.
* Pair larger radius values with generous padding so corners feel intentional.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Border Width" icon="square" href="/borders/width">
    Border width utilities
  </Card>

  <Card title="Border Style" icon="square" href="/borders/style">
    Border style utilities
  </Card>
</CardGroup>