Playground de border-radius en CSS

Ajusta border-radius por esquina o pares de esquinas, cambia unidades y propiedades físicas o lógicas y genera el CSS listo para usar.

Salida CSS

La salida abreviada agrupa valores en shorthands CSS cuando es posible. La salida individual genera una declaración por cada propiedad para revisar o copiar cada valor por separado.

Abreviada Individual

Aplicación

Elige cómo repartir los valores: puedes aplicar un único valor a todo el elemento o ajustar solo los lados, ejes o grupos que te interesen.

Todos Individual Pares de esquinas

Sistema de propiedades

Las propiedades físicas se aplican directamente a los lados del elemento, mientras que las propiedades lógicas se aplican a los lados del elemento en función de la dirección del texto.

Físicas Lógicas

Dirección del texto

Con propiedades lógicas es importante comprobar cómo cambian los resultados en idiomas que se escriben de izquierda a derecha y de derecha a izquierda.

Izquierda a derecha (ltr) Derecha a izquierda (rtl)

Unidad

CSS ofrece multitud de unidades. En cada lab puedes probar las más habituales para esa propiedad.

Todas las esquinas

Superior izquierda

Superior derecha

Inferior derecha

Inferior izquierda

Superior izquierda + inferior derecha

Superior derecha + inferior izquierda

border-radius

HTML

<div class="border-radius" dir="ltr">border-radius</div>

CSS

.border-radius {
  min-inline-size: min(100%, 18rem);
  min-block-size: 12rem;
  border-radius: 40px;
}