border-radius

Ejemplos

Ejemplo básico

Utiliza utilidades como rounded-sm y rounded-md para aplicar diferentes tamaños de radio de borde a un elemento:

<div class="rounded-sm ..."></div><div class="rounded-md ..."></div><div class="rounded-lg ..."></div><div class="rounded-xl ..."></div>

Redondear lados por separado

Utiliza utilidades como rounded-t-md y rounded-r-lg para redondear solo un lado de un elemento:

<div class="rounded-t-lg ..."></div><div class="rounded-r-lg ..."></div><div class="rounded-b-lg ..."></div><div class="rounded-l-lg ..."></div>

Redondear esquinas por separado

Utiliza utilidades como rounded-tr-md y rounded-tl-lg para redondear solo una esquina de un elemento:

<div class="rounded-tl-lg ..."></div><div class="rounded-tr-lg ..."></div><div class="rounded-br-lg ..."></div><div class="rounded-bl-lg ..."></div>

Usar propiedades lógicas

Utiliza utilidades como rounded-s-md y rounded-se-xl para establecer el radio del borde utilizando propiedades lógicas, que se asignan a las esquinas correspondientes según la dirección del texto:

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

Aquí están todas las utilidades de propiedades lógicas de radio de borde disponibles y sus equivalentes de propiedades físicas en los modos LTR y RTL.

Para un mayor control, también puedes usar los modificadores LTR y RTL para aplicar condicionalmente estilos específicos según la dirección actual del texto.

Crear botones tipo píldora

Utiliza la utilidad rounded-full para crear botones tipo píldora:

<button class="rounded-full ...">Guardar cambios</button>

Eliminar el radio de borde

Utiliza la utilidad rounded-none para eliminar un radio de borde existente de un elemento:

<button class="rounded-none ...">Guardar cambios</button>

Usar un valor personalizado

Usa la sintaxis rounded-[<value>] para establecer el/la radio de borde basándose en un valor completamente personalizado:

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

Para variables CSS, también puedes usar la sintaxis rounded-(<custom-property>) :

<div class="rounded-(--my-radius) ...">  <!-- ... --></div>

Esto es solo un atajo para rounded-[var(<custom-property>)] que añade la función var() por ti automáticamente.

Diseño responsivo

Antepone a la utilidad border-radius el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

<div class="rounded md:rounded-lg ...">  <!-- ... --></div>

Obtén más información sobre el uso de variantes en la documentación de variantes.

Personalizar el tema

Usa las variables de tema --radius-* para personalizar las utilidades de radio de borde en tu proyecto:

@theme {  --radius-5xl: 3rem; }

Ahora se puede usar la utilidad rounded-5xl en tu marcado:

<div class="rounded-5xl">  <!-- ... --></div>

Obtén más información sobre cómo personalizar tu tema en la documentación del tema.