Skip to content

Latest commit

 

History

History
346 lines (295 loc) · 11.6 KB

border-radius.mdx

File metadata and controls

346 lines (295 loc) · 11.6 KB

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}-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:

{

rounded-sm

rounded-md

rounded-lg

rounded-xl

} 
<!-- [!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>

Rounding sides separately

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

{

rounded-t-lg

rounded-r-lg

rounded-b-lg

rounded-l-lg

} 
<!-- [!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>

Rounding corners separately

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

{

rounded-tl-lg

rounded-tr-lg

rounded-br-lg

rounded-bl-lg

} 
<!-- [!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>

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:

{

Left-to-right

Right-to-left

} 
<!-- [!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>

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

{

Class Left-to-right Right-to-left
rounded-s-* rounded-l-* rounded-r-*
rounded-e-* rounded-r-* rounded-l-*
rounded-ss-* rounded-tl-* rounded-tr-*
rounded-se-* rounded-tr-* rounded-tl-*
rounded-es-* rounded-bl-* rounded-br-*
rounded-ee-* rounded-br-* rounded-bl-*

}

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:

{

rounded-full

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

Removing the border radius

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

{

rounded-none

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

Using a custom value

Responsive design

Customizing your theme