border radius

Utilities for controlling the border radius of an element.

2025-04-12

Written by: tdtc

ClassStyles
rounded-xsborder-radius: var(—radius-xs); /* 0.125rem (2px) */
rounded-smborder-radius: var(—radius-sm); /* 0.25rem (4px) */
rounded-mdborder-radius: var(—radius-md); /* 0.375rem (6px) */
rounded-lgborder-radius: var(—radius-lg); /* 0.5rem (8px) */
rounded-xlborder-radius: var(—radius-xl); /* 0.75rem (12px) */
rounded-2xlborder-radius: var(—radius-2xl); /* 1rem (16px) */
rounded-3xlborder-radius: var(—radius-3xl); /* 1.5rem (24px) */
rounded-4xlborder-radius: var(—radius-4xl); /* 2rem (32px) */
rounded-noneborder-radius: 0;
rounded-fullborder-radius: calc(infinity * 1px);
rounded-(<custom-property>)border-radius: var(<custom-property>);
rounded-[<value>]border-radius: <value>;

direction

top, right, bottom, left

for example:

rounded-b-xs

top-left, top-right, bottom-right, bottom-left

for example:

rounded-tl-sm

Dimension Point

start-start and end-start

for example:

rounded-s-md

start-end and end-end

for example:

rounded-e-lg

start-start

for example:

rounded-ss-xl

start-end

for example:

rounded-se-2xl

end-end

for example:

rounded-ee-3xl

end-start

for example:

rounded-es-4xl

Basic example

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

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

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

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

<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(Left-to-right) and RTL(Right-to-left) modes.

ClassLeft-to-rightRight-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:

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

<button class="rounded-none ...">Save Changes</button>

Using a custom value

Use the rounded-[] syntax to set the border radius based on a completely custom value:

<div class="rounded-[2vw] ...">
  <!-- ... -->
</div>

Ref