border-radius

Ejemplos

Ejemplo básico

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

Redondeando lados por separado

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

Redondeando esquinas por separado

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

Usando propiedades lógicas

Usa utilidades como rounded-s-md y rounded-se-xl para establecer el radio del borde usando propiedades lógicas, que se asignan a las esquinas apropiadas 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 mayor control, también puedes usar los modificadores LTR y RTL para aplicar estilos específicos condicionalmente dependiendo de la dirección del texto actual.

Creando botones tipo píldora

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

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

Eliminando el radio de borde

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

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

Usando un valor personalizado

Usa la sintaxis rounded-[<value>] para establecer el border radius basado 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 agrega la función var() por ti automáticamente.

Diseño Responsive

Prefija una utilidad border-radius con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

Aprende más sobre el uso de variantes en la documentación de variantes.

Personalizando tu tema

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

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

Ahora la utilidad rounded-5xl puede ser usada en tu marcado:

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

Aprende más sobre la personalización de tu tema en la documentación del tema.