Border Radius

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> </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> </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> </Figure>

Using logical properties

Use utilities like rounded-s-md and rounded-se-xl to set the border radius using logical properties, 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> </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 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> </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> </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" />