border-radius CSS
Gratis, sin registro, funciona en tu navegador.
El blob más corto en CSS: ocho porcentajes en una propiedad, sin SVG por ninguna parte. Es una forma genuinamente distinta de los blobs SVG, y se ofrece como algo propio y no como el mismo blob en otro formato.
Una exportación de border-radius CSS, recortada a las primeras líneas
.blob {
width: 320px;
height: 320px;
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}Lo que conviene saber
- Una propiedad sobre un elemento que ya tienes: nada que pegar en el marcado.
- Solo cuatro esquinas, así que no puede reproducir un blob de seis lóbulos y no pretende hacerlo.
- Se anima y transiciona con suavidad, cosa que un trazado SVG no hace sin trabajo extra.
- Los valores se generan dentro del propio límite de escalado del navegador, así que lo que ves es lo que se dibuja.
Compatibilidad de navegadores
Universal. La sintaxis de ocho valores con barra lleva soportada desde la propia propiedad. Solo blobs: una onda no tiene equivalente de cuatro esquinas, por eso este formato está deshabilitado en el generador de ondas en lugar de producir algo erróneo en silencio.
Tamaño en todos los preajustes
Todos los preajustes que este formato puede expresar, medidos tal como los emite el generador. El más pequeño es Hexágono con 94 bytes; el mayor es Destello con 110 bytes. El número de puntos es lo que marca la diferencia: cada punto extra añade un segmento cúbico completo de coordenadas.
| Formato | Tamaño |
|---|---|
| Hexágono | 94 B |
| Salpicadura | 102 B |
| Guijarro | 104 B |
| Flor | 104 B |
| Burbuja | 106 B |
| Triángulo redondeado | 108 B |
| Cristal | 108 B |
| Blob suave | 110 B |
| Blob orgánico | 110 B |
| Gema facetada | 110 B |
| Estrella | 110 B |
| Destello | 110 B |
Con más detalle
Hay una regla en la especificación de CSS que pilla a casi todos los generadores de este tipo. Si los dos radios que se encuentran en un borde suman más que la longitud de ese borde, el navegador calcula un único factor de escala a partir del peor borde y multiplica por él **todos** los radios. Un par malo no solo aplana una esquina: encoge la redondez de la forma entera, así que el navegador dibuja algo visiblemente distinto de la vista previa. Los pares de aquí se generan de modo que cada uno sume como mucho 100%, lo que hace que ese factor sea exactamente 1 por construcción y no por suerte.
Preguntas
¿Qué formas funcionan como border-radius CSS?
Este formato cubre Blob. Es una restricción real y no una limitación de esta herramienta: cuando falta un generador en esa lista, el formato realmente no puede expresarlo, y ofrecerlo de todos modos te entregaría algo que dibuja en silencio la forma equivocada.
¿Cuánto ocupa una exportación de border-radius CSS?
Entre 94 y 110 bytes en los 12 preajustes que lo admiten. Menos puntos es la palanca que importa; la suavidad y el color no cuestan nada.
¿Puedo editarlo a mano después?
Sí. La salida es texto plano sin comentarios del generador, sin marcas identificativas y sin enlaces de vuelta aquí. Cambia los colores, renombra la clase o pega el trazado en tu propio SVG: nada de lo que viene después depende de que siga igual.
Cada cifra y cada forma de esta página se produjeron ejecutando el generador durante la compilación, así que describen la herramienta que estás a punto de usar y no una versión que existió una vez.