Herramientas de desarrollo y codificación

Generador de radio de borde CSS

Corner Radii

Top Left

12px

Top Right

12px

Bottom Right

12px

Bottom Left

12px

Presets

Lock corners together

Preview

Preview Box

CSS Code

border-radius: 12px 12px 12px 12px;

permite a los usuarios establecer visualmente esquinas redondeadas para cualquier elemento HTML y genera instantáneamente el código de la propiedad CSS border-radius, sin necesidad de escribir manualmente.

¿Qué es CSS Border Radius?

Explica la propiedad CSS border-radius: qué hace (redondea las esquinas del borde exterior de un elemento), las cuatro esquinas individuales (superior izquierda, superior derecha, inferior derecha, inferior izquierda) y cómo se pueden expresar los valores en px, %, em o rem. Menciona que las cuatro se pueden establecer de forma independiente para diseños asimétricos.

Cómo usar el generador de CSS Border Radius

Una sección sencilla paso a paso:

Arrastra los deslizadores para establecer el valor del radio para cada esquina (Superior Izquierda, Superior Derecha, Inferior Derecha, Inferior Izquierda).
Habilita Bloquear esquinas juntas para aplicar un radio uniforme a las cuatro esquinas a la vez.
Usa los botones preestablecidos para obtener formas comunes instantáneas: cuadrado nítido, rectángulo redondeado, círculo completo/píldora o curva diagonal.
Observa cómo la caja de vista previa se actualiza en tiempo real.
Copia el código CSS generado con un solo clic.

Explicación de los ajustes preestablecidos de Border Radius

Cubre los cuatro ajustes preestablecidos integrados y sus casos de uso:

Nítido (0px) – para tarjetas de UI y celdas de tabla planas y modernas.
Redondeado (8px) – la convención de UI más común; se usa en botones, tarjetas, modales.
Píldora / Círculo (999px) – para insignias, etiquetas, imágenes de avatar y botones CTA.
Diagonal (999px / 0px alternando) – para elementos de diseño asimétricos creativos populares en páginas de destino.

Control de Bloqueo de Esquinas vs. Esquinas Individuales

Explica la diferencia entre border-radius uniforme (por ejemplo, border-radius: 12px) y el atajo de cuatro valores (por ejemplo, border-radius: 12px 0px 12px 0px). Describe cuándo usar el modo bloqueado (botones, tarjetas) frente al modo individual (bocadillos de diálogo, blobs orgánicos, formas de UI personalizadas).

Comprensión de la salida CSS

Desglosa el código generado:

css

border-radius: 12px 12px 12px 12px;

Explica el orden: superior izquierda → superior derecha → inferior derecha → inferior izquierda (en sentido horario desde la superior izquierda). Ten en cuenta las reglas abreviadas: si los cuatro valores son idénticos, basta con un solo valor (border-radius: 12px).

Casos de uso comunes para CSS Border Radius

Cubre aplicaciones prácticas en el mundo real:

Botones – un ligero redondeo (6–8px) mejora la percepción de la interactividad.
Tarjetas y contenedores – 12–16px es el estándar de la industria para interfaces de usuario SaaS.
Imágenes de avatar / perfil – 50% o 999px para recortes circulares.
Campos de entrada – un redondeo sutil (4–8px) para un diseño de formulario moderno.
Secciones principales y banners – radios asimétricos para diferenciación visual.
Tooltips y cuadros de llamada – una esquina nítida apuntando al elemento de activación.
Insignias y etiquetas – forma de píldora (999px) para etiquetas, categorías e indicadores de estado.

CSS Border Radius y compatibilidad con navegadores

Ten en cuenta que border-radius es compatible con todos los navegadores modernos (Chrome, Firefox, Safari, Edge) sin prefijos de proveedor. Menciona que los proyectos más antiguos que requieren compatibilidad con IE8 pueden necesitar los prefijos -webkit-border-radius y -moz-border-radius, aunque estos son obsoletos en el desarrollo actual.

Consejos para usar Border Radius en Diseño Web

Utiliza radios consistentes en todo tu sistema de diseño (por ejemplo, 8px para entradas, 12px para tarjetas, 999px para píldoras).
Evita mezclar demasiados radios diferentes en una sola página; crea inconsistencia visual.
Para interfaces de usuario escalables, prefiere valores de rem o em para que las esquinas se escalen con el tamaño de fuente del usuario.
Combina border-radius con overflow: hidden al recortar elementos secundarios (por ejemplo, tarjetas de imagen redondeadas).
Utiliza valores asimétricos grandes para crear formas de "blob orgánico", populares en gráficos principales de páginas de destino modernas.

Preguntas frecuentes

¿Qué es un generador de CSS border radius?

Un generador de CSS border radius es una herramienta online gratuita que te permite ajustar visualmente el redondeo de las esquinas de los elementos HTML y genera instantáneamente el código CSS border-radius correcto, eliminando la necesidad de escribir o adivinar valores manualmente.

¿Cómo genero un CSS border radius para un círculo?

Establece los cuatro valores de las esquinas en 999px (o 50% si el elemento es un cuadrado perfecto). El generador de CSS border radius proporciona una opción preestablecida con un clic para esta forma.

¿Puedo establecer diferentes valores de border radius para cada esquina?

Sí. Desmarca la opción "Bloquear esquinas juntas" en el generador, luego arrastra cada uno de los cuatro deslizadores de forma independiente para establecer valores personalizados para la superior izquierda, superior derecha, inferior derecha e inferior izquierda.

¿Qué unidades puedo usar para CSS border radius?

La propiedad border-radius acepta px, %, em, rem y vw/vh. Las más comunes en la práctica son px para interfaces fijas y % para formas fluidas o circulares. Este generador produce valores px para mayor precisión.

¿Cuál es el atajo CSS para border radius?

El atajo border-radius: TL TR BR BL establece las cuatro esquinas en orden de las agujas del reloj comenzando desde la superior izquierda. Si los cuatro valores son iguales, puedes escribir un solo valor: border-radius: 12px.

¿Es gratuito el generador de CSS border radius?

Sí, la herramienta es completamente gratuita. No se requiere cuenta ni registro. Simplemente ajusta los deslizadores, previsualiza el resultado y copia el código generado.

¿Funciona border-radius en imágenes?

Sí. Aplicar border-radius a una etiqueta redondea sus esquinas visibles. Para asegurar que el contenido secundario (como una imagen dentro de un

) también se recorte, añade overflow: hidden al contenedor padre.

¿Cuál es la diferencia entre border-radius y -webkit-border-radius?

-webkit-border-radius era un prefijo de proveedor anterior requerido para Safari y Chrome antes de que adoptaran la propiedad estándar border-radius. Los navegadores modernos ya no lo necesitan, y puedes usar border-radius de forma segura sin ningún prefijo.

¿Cómo creo un botón con forma de píldora usando CSS border radius?

Establece border-radius a un valor grande como 999px. Esto fuerza extremos izquierdos y derechos completamente redondeados independientemente del ancho del botón, creando la forma clásica de píldora utilizada en el diseño de UI moderno.

¿Puedo usar CSS border radius para crear formas asimétricas?

Sí. Al establecer valores diferentes para cada esquina — por ejemplo, border-radius: 999px 0 999px 0 — puedes crear formas diagonales, onduladas u orgánicas. Los deslizadores de esquina individuales del generador facilitan la experimentación visual antes de copiar el código.