Playground de corner-shape en CSS

Experimenta con corner-shape y border-radius para crear esquinas redondeadas, biseladas, recortadas o cóncavas por esquina o por pares.

Presets

Elige una configuración como punto de partida y ajusta después cualquier control.

Configuración

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.

AbreviadaIndividual

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.

TodosIndividualPares 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ísicasLó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)

Todas las esquinas

Forma

Superior izquierda

Forma

Superior derecha

Forma

Inferior derecha

Forma

Inferior izquierda

Forma

Superior izquierda + inferior derecha

Forma

Superior derecha + inferior izquierda

Forma

corner-shape

HTML

<div class="corner-shape" dir="ltr"></div>

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<div class="inline-[250px] block-[250px] bg-slate-900 border-2 border-solid border-[#94a3b8] rounded-[40px] [corner-shape:round]" dir="ltr"></div>

CSS

.corner-shape {
  inline-size: 250px;
  block-size: 250px;
  border-radius: 40px;
  corner-shape: round;
  background-color: #0f172a;
  border: 2px solid #94a3b8;
}