Generador CSS Border Radius

Generador CSS Border Radius - Crea Cualquier Estilo de Esquina

Genera valores CSS border-radius desde esquinas redondeadas simples hasta formas blob organicas complejas. Tres modos: simple para esquinas uniformes, avanzado para control individual, y blob para crear formas organicas unicas.

Que es CSS border-radius?

CSS border-radius redondea las esquinas del borde de un elemento. Puede tomar 1-4 valores:

Un valor: Mismo radio para todas las esquinas
border-radius: 20px;

Cuatro valores: Esquinas individuales (en sentido horario desde superior izquierda)
border-radius: 20px 40px 60px 80px;

La propiedad acepta px, %, em, rem y otras unidades CSS. Usar 50% en un cuadrado crea un circulo.

Como creo formas blob con border-radius?

Las formas blob usan la sintaxis avanzada de border-radius con 8 valores separados por una barra (/):

border-radius: h1 h2 h3 h4 / v1 v2 v3 v4;

Los valores representan:
- h1-h4: Radios horizontales
- v1-v4: Radios verticales

Ejemplo de forma blob:
border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;

Cual es la diferencia entre unidades px y %?

Unidades Pixel (px):
- Tamano fijo independiente de las dimensiones del elemento
- Mejor para tamanos consistentes

Unidades Porcentaje (%):
- Relativas a las dimensiones del elemento
- 50% en un cuadrado crea un circulo
- Escala con el tamano del elemento

¿Qué hace realmente la sintaxis border-radius de 8 valores?

border-radius: 70% 30% 30% 70% / 60% 40% 60% 40% significa radios HORIZONTALES (antes de /) y VERTICALES (después de /) por esquina. El resultado son curvas elípticas (no circulares) en cada esquina, produciendo formas blob orgánicas. Cada esquina tiene un par único x-radius y-radius, permitiendo efectos asimétricos imposibles con un solo valor.

¿Cuándo usar las cuatro propiedades detalladas border-*-radius en vez de la abreviada?

La opción Detallada genera cada esquina como su propia propiedad:

border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;

Cuándo preferir detallada:
- Tematizar o sobrescribir UNA esquina sin reescribir toda la abreviada (por ejemplo, un token de sistema de diseño como --radius-md aplicado solo a las esquinas superiores).
- CSS-in-JS / styled-components, donde las propiedades individuales se combinan de forma más predecible que una abreviada que reinicia las cuatro esquinas.
- Flujos de linter o especificidad que marcan la abreviada por pisar valores heredados por esquina.

Cuándo preferir abreviada: el atajo `border-radius` es más compacto y colapsa a menos valores cuando las esquinas se repiten — 4 esquinas iguales se vuelven un valor (border-radius: 12px). Usa el campo Selector CSS para envolver cualquier formato en una regla lista para pegar como `.card { ... }`. Para esquinas elípticas asimétricas (botones tipo píldora) la forma con barra `border-radius: 50px / 20px` define un radio horizontal y uno vertical para todas las esquinas a la vez.

¿Por qué 50% en elemento no cuadrado crea elipse en vez de círculo?

El porcentaje es relativo a las dimensiones de la CAJA: radios horizontales según ancho, verticales según alto. En caja de 200x100px, border-radius: 50% da radio horizontal 100px y vertical 50px — una elipse. Para forzar círculo en cualquier rectángulo usa border-radius: 9999px (px es absoluto), se recorta a la mitad del lado más corto.

¿Estas formas blob son performantes o afectan el rendering?

Border-radius está altamente optimizado en todos los navegadores — es una operación pura de shader GPU, costando esencialmente nada en cualquier valor. A diferencia de clip-path CSS o máscaras SVG, border-radius NO requiere recomputación al cambiar tamaño. Puedes aplicar blob shapes a miles de elementos sin impacto en FPS.

¿Debo usar border-radius o clip-path para formas no rectangulares?

Border-radius para curvas orgánicas (blobs, formas suaves); clip-path para polígonos angulares (hexágonos, estrellas, paths custom). Border-radius anima suave. Clip-path es más potente para geometría SVG-style pero más pesado en GPU y difícil de debuggear. Para componentes UI como cards y avatares, prefiere border-radius. Para separadores decorativos, clip-path o SVG.

Caracteristicas principales

• Tres modos: Simple, Avanzado y Blob
• Modo simple para radio de esquina uniforme
• Modo avanzado para control individual de esquinas
• Modo blob para creacion de formas organicas
• 12 formas predefinidas para comenzar
• Generador de formas blob aleatorias
• Soporte para unidades px y %
• Tamano de vista previa personalizable
• Color de vista previa personalizable
• Vista previa en vivo
• Copiar codigo CSS al portapapeles
• Procesamiento 100% del lado del cliente
• Soporte de modo oscuro
• Interfaz amigable para moviles