border-radius
En esta página
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
<!-- [!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
<!-- [!code classes:rounded-none] -->
<button class="rounded-none ...">Save Changes</button>