¿Qué produce exactamente el modo Blob del Generador de CSS Border Radius?

Produce la sintaxis elíptica de border-radius de 8 valores: cuatro porcentajes horizontales, una barra diagonal y luego cuatro porcentajes verticales, un par por esquina, que es el truco estándar para formas orgánicas con aspecto dibujado a mano en CSS.

¿Puede el Generador de CSS Border Radius generar salida en porcentaje o rem en lugar de píxeles?

Sí. Los modos Simple y Por esquina te permiten cambiar la unidad entre px, % y rem, y la vista previa en vivo y el CSS generado se actualizan de inmediato para coincidir.

¿Por qué el modo Por esquina a veces genera un único valor en lugar de cuatro?

Cuando las cuatro esquinas terminan siendo iguales, la herramienta colapsa automáticamente el border-radius a la forma abreviada de un solo valor: es un CSS válido y equivalente que mantiene tu hoja de estilos más limpia.

¿El Generador de CSS Border Radius sube mi diseño o CSS a algún lugar?

No. Cada cálculo y la vista previa en vivo se ejecutan localmente en tu navegador. Los valores que introduces y el CSS que generas nunca salen de tu dispositivo.

¿Para qué sirve el botón Aleatorio en el modo Blob?

Rellena los ocho porcentajes del blob con nuevos valores aleatorios con un solo clic, para que puedas explorar rápidamente variaciones de formas orgánicas en lugar de escribir cada esquina a mano.

¿El CSS border-radius generado es compatible con todos los navegadores modernos?

Sí. Tanto la forma abreviada estándar como la sintaxis elíptica de blob de 8 valores forman parte de la especificación CSS Backgrounds and Borders y funcionan en todos los navegadores principales actuales.

Generador de CSS Border Radius Online

Crea border-radius CSS simple, por esquina o en forma de blob con una vista previa en vivo. Todo se procesa en tu navegador.

El Generador de CSS Border Radius funciona por completo en tu navegador. Los valores que introduces y el CSS que generas nunca salen de tu dispositivo y no se suben a ArrayKit.

Abrir el Generador de Box Shadow

Acerca de Generador de Border Radius

El Generador de CSS Border Radius crea una declaración border-radius que puedes pegar directamente en tu hoja de estilos, con una vista previa en vivo que se actualiza mientras ajustas los valores. Cambia entre el modo Simple para un único radio en las cuatro esquinas, el modo Por esquina para redondear cada esquina de forma independiente, y el modo Blob para la forma elíptica de ocho valores que usan los diseñadores para simular una forma orgánica, dibujada a mano. Elige px, % o rem, arrastra los valores, o pulsa Aleatorio en el modo Blob para explorar formas que no habrías escrito a mano. Es útil para botones, tarjetas, avatares, blobs de héroe y cualquier componente donde las esquinas redondeadas deban verse exactamente bien antes de confirmar el CSS. Pensado para desarrolladores front-end y diseñadores que quieren retroalimentación visual instantánea. Todo se procesa localmente en tu navegador: ningún estilo ni marcado se sube a ningún servidor.

Características

El modo Simple redondea las cuatro esquinas con un único valor y un control deslizante
El modo Por esquina define arriba-izquierda, arriba-derecha, abajo-derecha y abajo-izquierda de forma independiente
El modo Blob genera el border-radius elíptico de 8 valores para formas orgánicas
Botón Aleatorio con un clic en el modo Blob para explorar formas rápidamente
Cambia entre unidades px, % y rem para los radios simple y por esquina
La vista previa cuadrada en vivo se actualiza al instante con cada cambio
Declaración CSS lista para copiar con un solo clic
Funciona por completo en tu navegador sin que se suba ningún CSS

Cómo usar Generador de Border Radius

Elige el modo Simple, Por esquina o Blob
Ajusta el control deslizante, los campos numéricos o los porcentajes del blob
Observa cómo se actualiza la vista previa en vivo en tiempo real
Copia la declaración border-radius generada

Ejemplo

Entrada

all corners 12px

Salida

border-radius: 12px;

Cuatro esquinas iguales se combinan en un único valor de border-radius.

Errores comunes y solución de problemas

La forma blob parece un rectángulo redondeado en lugar de una forma orgánica. — Asegúrate de que los porcentajes horizontal y vertical sean diferentes en cada esquina: valores H y V iguales en todas las esquinas solo producen una forma redondeada simple.
El CSS por esquina vuelve a colapsar en un único valor de forma inesperada. — Esto es normal: cuando las cuatro esquinas coinciden, el Generador de CSS Border Radius emite la forma abreviada de un solo valor en lugar de repetir el mismo número cuatro veces.
Un radio en porcentaje se ve diferente en un elemento que no es cuadrado. — El border-radius en porcentaje es relativo al ancho y alto propios del elemento, así que el mismo valor porcentual se renderiza de forma distinta en un rectángulo ancho que en un cuadrado: pruébalo con la proporción real de tu elemento.
La esquina redondeada desaparece en un elemento muy pequeño. — El border-radius está limitado a la mitad del lado más corto del elemento, así que un radio grande en px sobre una caja pequeña simplemente se renderiza como una píldora o un círculo completo en lugar de desbordarse.

Preguntas frecuentes

¿Qué produce exactamente el modo Blob del Generador de CSS Border Radius?: Produce la sintaxis elíptica de border-radius de 8 valores: cuatro porcentajes horizontales, una barra diagonal y luego cuatro porcentajes verticales, un par por esquina, que es el truco estándar para formas orgánicas con aspecto dibujado a mano en CSS.
¿Puede el Generador de CSS Border Radius generar salida en porcentaje o rem en lugar de píxeles?: Sí. Los modos Simple y Por esquina te permiten cambiar la unidad entre px, % y rem, y la vista previa en vivo y el CSS generado se actualizan de inmediato para coincidir.
¿Por qué el modo Por esquina a veces genera un único valor en lugar de cuatro?: Cuando las cuatro esquinas terminan siendo iguales, la herramienta colapsa automáticamente el border-radius a la forma abreviada de un solo valor: es un CSS válido y equivalente que mantiene tu hoja de estilos más limpia.
¿El Generador de CSS Border Radius sube mi diseño o CSS a algún lugar?: No. Cada cálculo y la vista previa en vivo se ejecutan localmente en tu navegador. Los valores que introduces y el CSS que generas nunca salen de tu dispositivo.
¿Para qué sirve el botón Aleatorio en el modo Blob?: Rellena los ocho porcentajes del blob con nuevos valores aleatorios con un solo clic, para que puedas explorar rápidamente variaciones de formas orgánicas en lugar de escribir cada esquina a mano.
¿El CSS border-radius generado es compatible con todos los navegadores modernos?: Sí. Tanto la forma abreviada estándar como la sintaxis elíptica de blob de 8 valores forman parte de la especificación CSS Backgrounds and Borders y funcionan en todos los navegadores principales actuales.

Herramientas relacionadas

Generador de Box Shadow CSS — Crea sombras CSS en capas con vista previa en vivo
Generador de Gradientes CSS — Diseña gradientes lineales, radiales y cónicos con paradas de color en vivo.
Calculadora de clamp CSS — Convierte tamaños mín/máx en un valor clamp() CSS fluido.
Generador de CSS Grid — Diseña una cuadrícula CSS de forma visual y copia el grid-template.
Cubic bezier — Da forma a curvas de easing cubic-bezier() de CSS arrastrando puntos.
Conversor de Unidades CSS — Convierte px, rem, em, pt y % al instante con un tamaño base.