KitMul MarkKitMul Text

Generador de Border Radius CSS

Disena valores personalizados de CSS border-radius con un editor visual. Controla cada esquina de forma independiente o vinculadas.

El Generador de Border Radius CSS proporciona una forma visual de disenar esquinas redondeadas para tus elementos web. Ajusta cada esquina de forma independiente o vincualas para un redondeo uniforme. Cambia entre unidades de pixeles y porcentaje, previsualiza la forma en tiempo real y copia el codigo CSS generado al instante. Todo se ejecuta en tu navegador sin interaccion con el servidor.

Tus datos no salen de tu navegador
Tutorial

Como usar

1
1

Elige unidad y modo de vinculacion

Selecciona pixeles o porcentaje y activa el modo vinculado para controlar todas las esquinas a la vez o individualmente.

2
2

Ajusta los valores de esquina

Arrastra los controles deslizantes de cada esquina para establecer el radio deseado y observa la vista previa actualizarse.

3
3

Copia el codigo CSS

Haz clic en el boton Copiar para copiar la propiedad border-radius CSS generada al portapapeles para usarla en tu proyecto.

Guide

Guia Completa de CSS Border Radius

Sintaxis de Border Radius

La propiedad CSS border-radius usa notacion abreviada. Un valor se aplica a todas las esquinas. Dos valores establecen pares superior-izquierda/inferior-derecha y superior-derecha/inferior-izquierda. Tres valores establecen superior-izquierda, superior-derecha/inferior-izquierda e inferior-derecha. Cuatro valores establecen cada esquina en sentido horario.

Crear circulos y elipses

Un circulo perfecto requiere border-radius: 50% en un elemento con ancho y alto iguales. Para formas elipticas, usa la notacion con barra: border-radius: 50% / 25% crea una elipse horizontal. Esta sintaxis avanzada permite definir radios horizontal y vertical por separado.

Esquinas redondeadas en sistemas de diseno

Los sistemas de diseno tipicamente definen una escala de tokens de border-radius desde none (0) hasta full (9999px). Las escalas comunes incluyen sm (4px), md (8px), lg (16px), xl (24px) y full (9999px). El uso consistente de estos tokens asegura armonia visual.

Soporte de navegadores y respaldos

CSS border-radius tiene soporte universal en todos los navegadores modernos. No se requieren prefijos de proveedor. Los navegadores antiguos que carecen de soporte simplemente mostraran esquinas cuadradas como un respaldo elegante, haciendo seguro su uso sin logica condicional.

Sources

Examples

Ejemplos Resueltos

Ejemplo: Tarjeta redondeada con esquinas de 12px

Objetivo: Aplicar esquinas redondeadas uniformes de 12px a un componente de tarjeta para un aspecto limpio y moderno.

1

Paso 1: Activa el modo vinculado para que todas las esquinas se actualicen juntas.

2

Paso 2: Arrastra el control deslizante a 12px.

3

Paso 3: Copia el CSS: border-radius: 12px;

Resultado: Una tarjeta con esquinas redondeadas uniformemente que coincide con patrones comunes de sistemas de diseno.

Ejemplo: Forma de pestana asimetrica

Objetivo: Crear un componente de pestana con solo las esquinas superiores redondeadas.

1

Paso 1: Desactiva el modo vinculado para controlar las esquinas independientemente.

2

Paso 2: Establece superior-izquierda y superior-derecha en 8px.

3

Paso 3: Mantiene inferior-izquierda e inferior-derecha en 0px.

4

Paso 4: Copia el CSS: border-radius: 8px 8px 0px 0px;

Resultado: Un elemento en forma de pestana con esquinas superiores redondeadas y bordes inferiores rectos.

Use Cases

Casos de uso

Botones y etiquetas en forma de pastilla

“Los elementos UI en forma de pastilla se crean estableciendo border-radius a la mitad de la altura del elemento, generalmente 9999px o 50%. Esta tecnica se usa ampliamente para etiquetas, insignias y botones de llamada a la accion que necesitan destacar con una forma suave y organica.”

Contenedores de tarjetas redondeados

“Los layouts basados en tarjetas usan valores consistentes de border-radius para crear un ritmo visual cohesivo. Los valores tipicos van de 8px a 16px, dando a las tarjetas una apariencia amigable mientras mantienen suficiente estructura para contener el contenido de manera limpia.”

Formas blob organicas para fondos

“Valores asimetricos de border-radius en las cuatro esquinas crean formas blob organicas usadas como elementos decorativos de fondo. Usando valores muy diferentes por esquina, los disenadores producen formas fluidas unicas sin necesitar SVG o reglas complejas de clip-path.”

Preguntas Frecuentes

?Que es CSS border-radius?

CSS border-radius redondea las esquinas del borde exterior de un elemento. Puedes establecer un valor para todas las esquinas o especificar cada una individualmente.

?Cual es la diferencia entre unidades px y %?

Los valores en pixeles establecen un tamano de radio fijo sin importar las dimensiones del elemento. Los valores en porcentaje son relativos al tamano del elemento, haciendo que 50% siempre produzca un circulo.

?Puedo establecer valores diferentes para cada esquina?

Si, CSS border-radius acepta hasta cuatro valores en el orden: superior-izquierda, superior-derecha, inferior-derecha, inferior-izquierda. Esta herramienta te permite desvincular esquinas para control independiente.

?Es gratuito este generador de border radius?

Si, esta herramienta es completamente gratuita sin registro, sin limites y sin funciones premium bloqueadas detras de un muro de pago. Usala ilimitadamente.

?Son mis datos privados y seguros?

Absolutamente. Esta herramienta se ejecuta completamente en tu navegador. Ningun dato se transmite a ningun servidor. Tus disenos permanecen completamente privados en tu dispositivo.

?Como hago un circulo perfecto con border-radius?

Establece border-radius a 50% en un elemento cuadrado. El elemento debe tener ancho y alto iguales para que el resultado sea un circulo perfecto.

Herramientas relacionadas

Generador de Box Shadow CSS

Genera box-shadow CSS con editor visual

Probar herramienta

Generador de Degradados CSS

Crea degradados CSS lineales, radiales y cónicos

Probar herramienta

Generador de Prompts de IA

Crea prompts detallados para generadores de imágenes de IA como Midjourney y Stable Diffusion.

Probar herramienta
Lectura Recomendada

Libros Recomendados sobre CSS y Diseno Responsivo

Responsive Web Design with HTML5 and CSS

Responsive Web Design with HTML5 and CSS

Ben Frain

Modern CSS and Responsive Web Design

Modern CSS and Responsive Web Design

Elian Novar

CSS by Building: 250 Hands-On Exercises

CSS by Building: 250 Hands-On Exercises

Laurence Lars Svekis

Como asociado de Amazon, ganamos con las compras que califican.

Potencia tus Capacidades

Productos Recomendados para Disenadores Web

Monitor Profesional ASUS ProArt Display 27 Pulgadas 4K HDR para Diseno Pixel-Perfect

Monitor Profesional ASUS ProArt Display 27 Pulgadas 4K HDR para Diseno Pixel-Perfect

ASUS

Tableta Grafica Wacom Intuos Small Bluetooth para Disenadores y Creadores

Tableta Grafica Wacom Intuos Small Bluetooth para Disenadores y Creadores

Wacom

Raton Vertical Ergonomico Inalambrico Logitech Lift para Sesiones de Diseno Comodas

Raton Vertical Ergonomico Inalambrico Logitech Lift para Sesiones de Diseno Comodas

Logitech

Como asociado de Amazon, ganamos con las compras que califican.

¿Qué te parece esta herramienta?

Boletín

Recibe Consejos de Productividad y Nuevas Herramientas Primero

Únete a creadores y desarrolladores que valoran la privacidad. En cada edición: nuevas herramientas, trucos de productividad y novedades — sin spam.

Acceso prioritario a nuevas herramientas
Cancela en cualquier momento, sin preguntas