CSS Border Radius: Formas, Blobs y Esquinas Creativas
Explora border-radius desde simples esquinas redondeadas hasta formas blob complejas con la sintaxis de 8 valores.
CSS border-radius es mucho más poderoso de lo que la mayoría de los desarrolladores se dan cuenta. Más allá de las simples esquinas redondeadas hay una sintaxis completa de 8 valores para formas orgánicas.
Cada esquina puede tener radios horizontales y verticales independientes, permitiendo formas fluidas y orgánicas que antes solo eran posibles con SVG.
Sintaxis border-radius (1-4 valores)
border-radius acepta 1 a 4 valores usando la abreviatura CSS estándar. Un valor: las cuatro esquinas iguales. Dos valores: primero para arriba-izquierda y abajo-derecha.
Herramienta gratuita Generador de Border Radius Crea formas personalizadas y bordes blob con salida CSS en vivoAbreviada y extendida
La abreviatura border-radius establece todas las esquinas a la vez. Las propiedades extendidas establecen esquinas individuales: border-top-left-radius, etc.
Sintaxis de 8 valores para formas asimétricas
La sintaxis de 8 valores usa una barra para separar radios horizontales y verticales: border-radius: Ah Bh Ch Dh / Av Bv Cv Dv.
Herramienta gratuita Generador de Box Shadow Crea sombras box CSS en capas con vista previa en vivoCrear círculos y píldoras
Para un círculo: establece border-radius: 50% en un elemento cuadrado. Para una píldora: establece border-radius: 9999px en un elemento rectangular.
Técnica de formas blob
Las formas blob usan la sintaxis de 8 valores con valores asimétricos: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%.
Patrones de diseño UI
Patrones border-radius comunes: 4-8px para esquinas sutiles de tarjetas, 12-16px para tarjetas prominentes, 50% para círculos de avatar, 9999px para chips.
Herramienta gratuita Generador de Glassmorphism Crea efectos UI de vidrio esmerilado con CSS backdrop-filter