Generador border-radius CSS

Cómo funciona

Escriba un color de caja a la izquierda — solo pinta la vista previa, porque border-radius no lleva color. Después ajuste los cuatro controles de esquina. En el modo de esquinas redondeadas los valores son píxeles y la herramienta escribe la forma válida más corta: cuatro esquinas iguales se reducen a un único border-radius: 16px, y las diagonales iguales a dos valores. Para tarjetas y botones el rango habitual va de 8 a 24 píxeles; el valor predeterminado de 16 píxeles queda en el centro. En el modo blob los valores pasan a porcentajes: cada control fija el radio HORIZONTAL de su esquina, la herramienta deriva el radio vertical como 100 menos su valor, y el código sale en la sintaxis de barra con dos listas — la notación que da dos radios distintos a una esquina y convierte el rectángulo en una gota orgánica. El código de la derecha se reescribe con cada cambio: cópielo en su hoja de estilos o descargue la vista previa como PNG de 1200×800 píxeles.

Esta herramienta también se busca como generador border radius css, esquinas redondeadas css, bordes redondeados css, border radius css, generador blob css, ejemplos border radius.

¿Qué es border-radius?

border-radius es la propiedad CSS que redondea las esquinas de una caja HTML. Un solo valor se aplica a las cuatro esquinas; hasta cuatro valores ajustan cada esquina por separado, y la forma con barra da a cada esquina dos radios — uno horizontal y otro vertical. Los valores pueden ser unidades fijas como píxeles o porcentajes del tamaño de la propia caja, y por eso 50 % convierte un cuadrado en círculo. El redondeo es puro dibujo: no mueve el diseño ni cambia las dimensiones de la caja.

¿Qué es Forma blob?

Blob es el nombre que el diseño web da a las formas suaves y orgánicas que recuerdan una gota o una piedra de río más que un rectángulo. En CSS un blob nace de una sola caja con border-radius en sintaxis de barra: cada esquina recibe un radio horizontal y otro vertical distintos, las esquinas se vuelven cuartos de elipse y la silueta rectangular desaparece. Se usa sobre todo en secciones de portada, marcos de retrato y fondos decorativos — y como la forma es código, no necesita archivo de imagen y se mantiene nítida a cualquier tamaño.

¿Cuál es la diferencia entre el radio en píxeles y en porcentaje?

El radio en píxeles es absoluto: una esquina de 16 píxeles mide lo mismo en una caja de 200 que en una de 1000 píxeles de ancho, y eso mantiene coherentes las familias de tarjetas. El porcentaje se refiere a la propia caja: los radios horizontales se miden sobre el ancho y los verticales sobre el alto. Por eso 50 % produce un círculo en una caja cuadrada pero una elipse en un rectángulo, y por eso la esquina crece con la caja. Regla práctica: píxeles para componentes de interfaz, porcentajes para trabajo de forma — círculos y blobs.

La regla de desbordamiento: por qué 100 píxeles dejan de hacer efecto

Lleve un control hasta el final y en algún punto la forma deja de cambiar. No es un error: es la regla de desbordamiento de CSS. Cuando la suma de los dos radios de un mismo borde supera la longitud del borde, el navegador reduce TODOS los radios con el mismo factor. En un botón de 200 píxeles de ancho caben exactamente 100 + 100; en una tarjeta de 300 píxeles, esas mismas esquinas todavía tienen margen. La vista previa aplica la misma regla, así que la forma que ve es la que dibujará el navegador.

Si lo que busca es un círculo o una píldora, olvide el cálculo en píxeles: border-radius: 50% convierte una caja cuadrada en círculo, y border-radius: 999px convierte un botón rectangular en píldora. Un valor enorme como 999 es seguro precisamente por la regla de desbordamiento — el navegador lo recorta al mayor radio que cabe.

¿Qué radio para qué caso?

El radio de esquina habla un idioma, igual que la sombra: radio pequeño, seriedad; radio grande, suavidad.

• Tarjetas, paneles, campos de texto → 8-16 píxeles: la esquina se nota sin llamar la atención
• Botones → 8-12 píxeles, o 999 píxeles para la píldora: ambos son comunes, pero use un solo idioma por página
• Avatares e insignias → 50 %: el contenido cuadrado se vuelve un círculo perfecto
• Gráficos de portada y fondos decorativos → modo blob: la sintaxis de barra construye formas orgánicas

Preguntas frecuentes

¿Qué significa el orden de los valores de border-radius?

Cuatro valores giran en sentido horario desde arriba a la izquierda: superior izquierda, superior derecha, inferior derecha, inferior izquierda. Con menos valores, las esquinas que faltan copian su diagonal: con dos valores, el primero fija superior-izquierda e inferior-derecha y el segundo el otro par. Esta herramienta siempre escribe la forma válida más corta — verá el código acortarse cuando los controles se igualan.

¿Qué es la sintaxis de barra (30% 70% ... / 70% 30% ...)?

A la izquierda de la barra están los radios horizontales de las esquinas; a la derecha, los verticales. Cuando los dos difieren, la esquina ya no dibuja un cuarto de círculo sino un cuarto de elipse — de ahí viene exactamente el aspecto orgánico de los blobs. En el modo blob esta herramienta deriva la lista vertical como 100 menos su valor horizontal: un control en 30 da un radio vertical de 70. La regla es fija y el resultado, predecible.

¿Por qué mi color no aparece en el código?

Porque border-radius solo describe la geometría de las esquinas; el color pertenece a propiedades separadas como background-color. El campo de color pinta la vista previa para que juzgue la forma sobre una superficie real. Al pegar el código, las esquinas se aplican al color que su elemento ya tenga.

¿Qué guarda el botón Descargar?

Un PNG de 1200×800 píxeles con la forma de la vista previa — útil para llevar el estilo de esquinas a una revisión de diseño. Para el código use el botón de copiar; y si quiere redondear las esquinas de un archivo de imagen real, ese trabajo lo hace la herramienta de redondeo de imágenes de este sitio.