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

# Border Radius Utilities for Rounded Corners in AtomicKit

> Round corners of Elementor elements using AtomicKit rounded-* utilities, with side and corner variants for precise border radius control.

AtomicKit's border radius utilities let you round element corners with a single class — from a subtle 4px softening all the way to a fully circular pill shape. When a uniform radius isn't enough, side-specific and individual corner variants give you granular control over exactly which corners are affected.

## Radius Scale

The base `rounded-*` classes apply an identical radius to all four corners of the element.

| Class           | Value  | CSS Property            |
| --------------- | ------ | ----------------------- |
| `.rounded-none` | 0      | `border-radius: 0`      |
| `.rounded-sm`   | 4px    | `border-radius: 4px`    |
| `.rounded`      | 6px    | `border-radius: 6px`    |
| `.rounded-lg`   | 8px    | `border-radius: 8px`    |
| `.rounded-xl`   | 12px   | `border-radius: 12px`   |
| `.rounded-2xl`  | 16px   | `border-radius: 16px`   |
| `.rounded-full` | 9999px | `border-radius: 9999px` |

## Side Variants

Side variants round two adjacent corners on the same side of the element. They're ideal for drawers, tooltips, tabs, and any component that's flush against one edge of the viewport or a parent container.

| Prefix        | Corners Affected           | Example Class  |
| ------------- | -------------------------- | -------------- |
| `rounded-t-*` | Top-left + Top-right       | `rounded-t-lg` |
| `rounded-r-*` | Top-right + Bottom-right   | `rounded-r-xl` |
| `rounded-b-*` | Bottom-left + Bottom-right | `rounded-b-lg` |
| `rounded-l-*` | Top-left + Bottom-left     | `rounded-l-xl` |

Typical suffixes for side variants: `sm`, `base`, `lg`, `xl` (e.g., `rounded-t-sm`, `rounded-t-base`, `rounded-t-lg`, `rounded-t-xl`).

## Corner Variants

Corner variants target a single corner with surgical precision — useful for asymmetric design treatments, speech bubbles, or any component that rounds one corner differently from the rest.

| Class          | Corner Affected | Example         |
| -------------- | --------------- | --------------- |
| `rounded-tl-*` | Top-left        | `rounded-tl-lg` |
| `rounded-tr-*` | Top-right       | `rounded-tr-xl` |
| `rounded-br-*` | Bottom-right    | `rounded-br-lg` |
| `rounded-bl-*` | Bottom-left     | `rounded-bl-sm` |

Typical suffixes for corner variants: `sm`, `base`, `lg`, `xl` (e.g., `rounded-tl-sm`, `rounded-tl-base`, `rounded-tl-lg`, `rounded-tl-xl`).

## Code Examples

**Standard button — moderate rounding:**

```html theme={null}
<div class="border-2 border-solid border-primary rounded-lg">
  <!-- Button with 8px corner radius -->
</div>
```

**Card surface — subtle softening:**

```html theme={null}
<div class="border-1 border-solid border-gray rounded">
  <!-- Card with 6px corners, unobtrusive rounding -->
</div>
```

**Pill badge or tag:**

```html theme={null}
<div class="rounded-full">
  <!-- Tag or label with fully circular end caps -->
</div>
```

**Drawer or bottom sheet — top corners only:**

```html theme={null}
<div class="rounded-t-lg">
  <!-- Slides up from bottom; top-left and top-right are rounded, bottom edges are square -->
</div>
```

**Asymmetric callout — single corner:**

```html theme={null}
<div class="border-2 border-solid border-primary rounded-tl-lg">
  <!-- Only the top-left corner is rounded for a speech bubble or notch effect -->
</div>
```

## Best Practices

* Stick to one or two radius sizes per page. Mixing too many values (e.g., `rounded-sm` on some elements and `rounded-xl` on others without intention) creates visual inconsistency.
* Use `rounded-full` for pills, avatar images, icon buttons, and tag labels — any element whose width and height are equal will become a perfect circle.
* Use `rounded-none` to explicitly reset corner rounding on elements that inherit a radius from a parent or from Elementor's default widget styles.
* Match corner radius to element size — smaller components (chips, badges) look better with `rounded-sm` or `rounded`, while larger cards and modals benefit from `rounded-lg` or `rounded-xl`.
* Use side variants (`rounded-t-*`) for components that are attached to an edge — for example, a tab that sits flush against a panel, or a bottom sheet anchored to the viewport floor.

## Related Utilities

* [Border Width](/borders/width) — Add border thickness to go alongside rounded corners.
* [Border Style](/borders/style) — Choose solid or dashed line rendering for your border.