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

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