> ## 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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.