Estilos Forma

Forma

La forma dirige la atención y comunica el tipo de componente. Material 3 usa una escala de esquinas redondeadas que va de 0 (recta) a completa (píldora o círculo).

Office avanzadoInscribirme

Ofimática

Escala de forma

Escala de esquinas

Ningunanone · 0 dp

Extra pequeñaextra-small · 4 dp

Pequeñasmall · 8 dp

Medianamedium · 12 dp

Grandelarge · 16 dp

Extra grandeextra-large · 28 dp

Completafull · 50%

Las esquinas grandes se sienten amables y suaves; las rectas, formales y técnicas. Lo importante es usar la escala con coherencia.

Forma por componente

Forma	Componentes
Ninguna (0)	Barras superiores e inferiores, cajón a pantalla completa
Extra pequeña (4)	Campos de texto (arriba), menús, snackbars, tooltips
Pequeña (8)	Chips
Mediana (12)	Tarjetas, FAB pequeño
Grande (16)	FAB, cajón de navegación (lado derecho)
Extra grande (28)	Diálogos, hojas inferiores (arriba), FAB grande
Completa	Botones, interruptores, sliders, insignias, barra de búsqueda

Redondas y cortadas

Además de redondear, se pueden cortar las esquinas en diagonal, como un sello. Úsalo con moderación, para una marca con carácter fuerte.

Redondeada

Cortada

Mixta

En CSS

:root {
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
}
.tarjeta { border-radius: var(--md-sys-shape-corner-medium); }
.boton   { border-radius: var(--md-sys-shape-corner-full); }

/* Esquinas cortadas con clip-path */
.cortada {
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px),
                     calc(100% - 12px) 100%, 0 100%, 0 12px);
}