# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/border-radius.mdx

import { ApiTable } from "@/components/api-table.tsx";
import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";

export const title = "border-radius";
export const description = "Utilities for controlling the border radius of an element.";

<ApiTable
  rows={[
    ["rounded", ["border-radius"]],
    ["rounded-s", ["border-start-start-radius", "border-end-start-radius"]],
    ["rounded-e", ["border-start-end-radius", "border-end-end-radius"]],
    ["rounded-t", ["border-top-left-radius", "border-top-right-radius"]],
    ["rounded-r", ["border-top-right-radius", "border-bottom-right-radius"]],
    ["rounded-b", ["border-bottom-right-radius", "border-bottom-left-radius"]],
    ["rounded-l", ["border-top-left-radius", "border-bottom-left-radius"]],
    ["rounded-ss", ["border-start-start-radius"]],
    ["rounded-se", ["border-start-end-radius"]],
    ["rounded-ee", ["border-end-end-radius"]],
    ["rounded-es", ["border-end-start-radius"]],
    ["rounded-tl", ["border-top-left-radius"]],
    ["rounded-tr", ["border-top-right-radius"]],
    ["rounded-br", ["border-bottom-right-radius"]],
    ["rounded-bl", ["border-bottom-left-radius"]],
  ].flatMap(([className, properties]) => [
    [`${className}-xs`, properties.map((property) => `${property}: var(--radius-xs); /* 0.125rem (2px) */`).join("\n")],
    [`${className}-sm`, properties.map((property) => `${property}: var(--radius-sm); /* 0.25rem (4px) */`).join("\n")],
    [`${className}-md`, properties.map((property) => `${property}: var(--radius-md); /* 0.375rem (6px) */`).join("\n")],
    [`${className}-lg`, properties.map((property) => `${property}: var(--radius-lg); /* 0.5rem (8px) */`).join("\n")],
    [`${className}-xl`, properties.map((property) => `${property}: var(--radius-xl); /* 0.75rem (12px) */`).join("\n")],
    [`${className}-2xl`, properties.map((property) => `${property}: var(--radius-2xl); /* 1rem (16px) */`).join("\n")],
    [
      `${className}-3xl`,
      properties.map((property) => `${property}: var(--radius-3xl); /* 1.5rem (24px) */`).join("\n"),
    ],
    [`${className}-4xl`, properties.map((property) => `${property}: var(--radius-4xl); /* 2rem (32px) */`).join("\n")],
    [`${className}-none`, properties.map((property) => `${property}: 0;`).join("\n")],
    [`${className}-full`, properties.map((property) => `${property}: calc(infinity * 1px);`).join("\n")],
    [
      `${className}-(<custom-property>)`,
      properties.map((property) => `${property}: var(<custom-property>);`).join("\n"),
    ],
    [`${className}-[<value>]`, properties.map((property) => `${property}: <value>;`).join("\n")],
  ])}
/>

## Examples

### Basic example

Use utilities like `rounded-sm` and `rounded-md` to apply different border radius sizes to an element:

<Figure>

<Example>
  {
    <div className="flex flex-col items-center justify-around gap-4 text-center text-sm leading-6 font-bold text-white sm:flex-row">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-sm</p>
        <div className="size-16 rounded-sm bg-purple-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-md</p>
        <div className="size-16 rounded-md bg-purple-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-lg</p>
        <div className="size-16 rounded-lg bg-purple-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-xl</p>
        <div className="size-16 rounded-xl bg-purple-500 p-4"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:rounded-sm,rounded-md,rounded-lg,rounded-xl] -->
<div class="rounded-sm ..."></div>
<div class="rounded-md ..."></div>
<div class="rounded-lg ..."></div>
<div class="rounded-xl ..."></div>
```

</Figure>

### Rounding sides separately

Use utilities like `rounded-t-md` and `rounded-r-lg` to only round one side of an element:

<Figure>

<Example>
  {
    <div className="flex flex-col items-center justify-around gap-4 text-center text-sm leading-6 font-bold text-white sm:flex-row">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-t-lg</p>
        <div className="size-16 rounded-t-lg bg-blue-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-r-lg</p>
        <div className="size-16 rounded-r-lg bg-blue-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-b-lg</p>
        <div className="size-16 rounded-b-lg bg-blue-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-l-lg</p>
        <div className="size-16 rounded-l-lg bg-blue-500 p-4"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:rounded-t-lg,rounded-r-lg,rounded-b-lg,rounded-l-lg] -->
<div class="rounded-t-lg ..."></div>
<div class="rounded-r-lg ..."></div>
<div class="rounded-b-lg ..."></div>
<div class="rounded-l-lg ..."></div>
```

</Figure>

### Rounding corners separately

Use utilities like `rounded-tr-md` and `rounded-tl-lg` utilities to only round one corner of an element:

<Figure>

<Example>
  {
    <div className="flex flex-col items-center justify-around gap-4 text-center text-sm leading-6 font-bold text-white sm:flex-row">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-tl-lg</p>
        <div className="size-16 rounded-tl-lg bg-pink-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-tr-lg</p>
        <div className="size-16 rounded-tr-lg bg-pink-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-br-lg</p>
        <div className="size-16 rounded-br-lg bg-pink-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-bl-lg</p>
        <div className="size-16 rounded-bl-lg bg-pink-500 p-4"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:rounded-tl-lg,rounded-tr-lg,rounded-br-lg,rounded-bl-lg] -->
<div class="rounded-tl-lg ..."></div>
<div class="rounded-tr-lg ..."></div>
<div class="rounded-br-lg ..."></div>
<div class="rounded-bl-lg ..."></div>
```

</Figure>

### Using logical properties

Use utilities like `rounded-s-md` and `rounded-se-xl` to set the border radius using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts), which map to the appropriate corners based on the text direction:

<Figure>

<Example>
  {
    <div className="grid grid-cols-2 place-items-center gap-x-4">
      <div className="flex flex-col items-start gap-y-4" dir="ltr">
        <p className="text-sm font-medium">Left-to-right</p>
        <div className="size-16 rounded-s-lg bg-blue-500 p-4"></div>
      </div>
      <div className="flex flex-col items-start gap-y-4" dir="rtl">
        <p className="text-sm font-medium">Right-to-left</p>
        <div className="size-16 rounded-s-lg bg-blue-500 p-4"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:rounded-s-lg] -->
<!-- [!code word:dir="ltr"] -->
<!-- [!code word:dir="rtl"] -->
<div dir="ltr">
  <div class="rounded-s-lg ..."></div>
</div>

<div dir="rtl">
  <div class="rounded-s-lg ..."></div>
</div>
```

</Figure>

Here are all the available border radius logical property utilities and their physical property equivalents in both LTR and RTL modes.

{

<table>
  <thead>
    <tr>
      <th>Class</th>
      <th>Left-to-right</th>
      <th>Right-to-left</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <code>rounded-s-*</code>
      </td>
      <td>
        <code>rounded-l-*</code>
      </td>
      <td>
        <code>rounded-r-*</code>
      </td>
    </tr>
    <tr>
      <td>
        <code>rounded-e-*</code>
      </td>
      <td>
        <code>rounded-r-*</code>
      </td>
      <td>
        <code>rounded-l-*</code>
      </td>
    </tr>
    <tr>
      <td>
        <code>rounded-ss-*</code>
      </td>
      <td>
        <code>rounded-tl-*</code>
      </td>
      <td>
        <code>rounded-tr-*</code>
      </td>
    </tr>
    <tr>
      <td>
        <code>rounded-se-*</code>
      </td>
      <td>
        <code>rounded-tr-*</code>
      </td>
      <td>
        <code>rounded-tl-*</code>
      </td>
    </tr>
    <tr>
      <td>
        <code>rounded-es-*</code>
      </td>
      <td>
        <code>rounded-bl-*</code>
      </td>
      <td>
        <code>rounded-br-*</code>
      </td>
    </tr>
    <tr>
      <td>
        <code>rounded-ee-*</code>
      </td>
      <td>
        <code>rounded-br-*</code>
      </td>
      <td>
        <code>rounded-bl-*</code>
      </td>
    </tr>
  </tbody>
</table>

}

For more control, you can also use the [LTR and RTL modifiers](/docs/hover-focus-and-other-states#rtl-support) to conditionally apply specific styles depending on the current text direction.

### Creating pill buttons

Use the `rounded-full` utility to create pill buttons:

<Figure>

<Example>
  {
    <div className="flex justify-center gap-4 text-center text-sm leading-6 font-bold text-white">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-full</p>
        <button className="rounded-full bg-cyan-500 px-4 py-2 text-sm font-semibold text-white">Save Changes</button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:rounded-full] -->
<button class="rounded-full ...">Save Changes</button>
```

</Figure>

### Removing the border radius

Use the `rounded-none` utility to remove an existing border radius from an element:

<Figure>

<Example>
  {
    <div className="flex justify-center gap-4 text-center text-sm leading-6 font-bold text-white">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-none</p>
        <button className="rounded-none bg-sky-500 px-4 py-2 text-sm font-semibold text-white">Save Changes</button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:rounded-none] -->
<button class="rounded-none ...">Save Changes</button>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="rounded" name="border radius" value="2vw" variable="radius" />

### Responsive design

<ResponsiveDesign property="border-radius" defaultClass="rounded" featuredClass="rounded-lg" />

## Customizing your theme

<CustomizingYourTheme utility="rounded" themeKey="radius" name="border radius" customName="5xl" customValue="3rem" />