KitMul MarkKitMul Text

Generador de Border Radius CSS

Diseña 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 diseñar 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 código CSS generado al instante. Todo se ejecuta en tu navegador sin interacción con el servidor.

Tus datos no salen de tu navegador
¿Te ha sido útil está herramienta?
Tutorial

Cómo 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 código CSS

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

Guide

Guía Completa de CSS Border Radius

Sintaxis de Border Radius

La propiedad CSS border-radius usa notación 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 círculos y elipses

Un círculo perfecto requiere border-radius: 50% en un elemento con ancho y alto iguales. Para formas elipticas, usa la notación con barra: border-radius: 50% / 25% crea una elipse horizontal. Está sintaxis avanzada permite definir radios horizontal y vertical por separado.

Esquinas redondeadas en sistemas de diseño

Los sistemas de diseño típicamente 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 armonía 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 lógica 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 diseño.

Ejemplo: Forma de pestaña asimétrica

Objetivo: Crear un componente de pestaña 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 pestaña con esquinas superiores redondeadas y bordes inferiores rectos.

Casos de uso

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%. Está técnica se usa ampliamente para etiquetas, insignias y botones de llamada a la acción que necesitan destacar con una forma suave y orgánica.”

Contenedores de tarjetas redondeados

“Los layouts basados en tarjetas usan valores consistentes de border-radius para crear un ritmo visual cohesivo. Los valores típicos 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 orgánicas para fondos

“Valores asimetricos de border-radius en las cuatro esquinas crean formas blob orgánicas usadas como elementos decorativos de fondo. Usando valores muy diferentes por esquina, los diseñadores producen formas fluidas únicas sin necesitar SVG o reglas complejas de clip-path.”

Preguntas Frecuentes

?Qué 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.

?Cuál es la diferencia entre unidades px y %?

Los valores en pixeles establecen un tamaño de radio fijo sin importar las dimensiones del elemento. Los valores en porcentaje son relativos al tamaño del elemento, haciendo que 50% siempre produzca un círculo.

?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. Está herramienta te permite desvincular esquinas para control independiente.

?Es gratuito este generador de border radius?

Si, está herramienta es completamente gratuita sin registró, sin límites y sin funciones premium bloqueadas detrás de un muro de pagó. Usala ilimitadamente.

?Son mis datos privados y seguros?

Absolutamente. Está herramienta se ejecuta completamente en tu navegador. Ningún dato se transmite a ningún servidor. Tus diseños permanecen completamente privados en tu dispositivo.

?Cómo hago un círculo 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 círculo perfecto.

Ayúdanos a mejorar

¿Qué te parece está herramienta?

Cada herramienta de Kitmul se construye a partir de peticiones reales de usuarios. Tu valoración y tus sugerencias nos ayudan a arreglar bugs, añadir funciones que faltan y construir las herramientas que realmente necesitas.

Valora está herramienta

Pulsa una estrella para contarnos lo útil que te ha resultado.

Sugiere una mejora o reporta un bug

¿Te falta alguna función? ¿Has encontrado un falló? ¿Tienes una idea? Cuéntanoslo y lo revisaremos.

Herramientas relacionadas

Generador de Botones CSS

Genera estilos CSS personalizados para botones

Probar herramienta

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
Lectura Recomendada

Libros Recomendados sobre CSS y Diseñó 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

Cómo asociado de Amazon, ganamos con las compras que califican.

Potencia tus Capacidades

Productos Recomendados para Diseñadores Web

Monitor Profesional ASUS ProArt Display 27 Pulgadas 4K HDR para Diseñó Pixel-Perfect

Monitor Profesional ASUS ProArt Display 27 Pulgadas 4K HDR para Diseñó Pixel-Perfect

ASUS

Tableta Gráfica Wacom Intuos Small Bluetooth para Diseñadores y Creadores

Tableta Gráfica Wacom Intuos Small Bluetooth para Diseñadores y Creadores

Wacom

Raton Vertical Ergonomico Inalambrico Logitech Lift para Sesiones de Diseñó Comodas

Raton Vertical Ergonomico Inalambrico Logitech Lift para Sesiones de Diseñó Comodas

Logitech

Cómo asociado de Amazon, ganamos con las compras que califican.

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