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.

Salida CSS

Abreviada Individual

Aplicación

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

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"></div>

CSS

.corner-shape {
  border-radius: 40px;
  corner-shape: round;
}