Skip to content
Diseno · undefined

Generador de border-radius

Ajusta visualmente las esquinas redondeadas de cualquier elemento. Copia CSS abreviado, completo, clases Tailwind o una propiedad personalizada — todo calculado en tu navegador.

In-browser only Simple / Advanced / Blob Shareable URL

200 × 200 px

Igual en todos los lados
Unidad
Esquinas
Elemento de vista previa
Tamano (px)
Borde
Fondo
border-radius: 0px;

Todo se calcula en tu navegador — nada se sube a ningun servidor.

Primeros pasos

Como usar el generador de border-radius

  1. 1
    Elige un modo

    Selecciona Simple para redondeo uniforme, Avanzado para control eliptico por esquina, o Blob para formas organicas libres con porcentajes.

  2. 2
    Ajusta los controles de esquina

    Arrastra un control o escribe un valor directamente en el campo numerico. En modo Simple, activa "Igual en todos los lados" para vincular las cuatro esquinas a un valor.

  3. 3
    Vista previa en tiempo real

    El elemento se actualiza al instante. Cambia su tamano con los campos Tamano, y estiliza su borde y fondo en el panel de controles.

  4. 4
    Selecciona un preset

    Usa los botones Elemento de vista previa para saltar a valores predeterminados para Boton, Tarjeta, Avatar, Imagen o Campo — y luego ajusta.

  5. 5
    Elige el formato de salida

    Escoge Abreviado, Completo, Tailwind o Propiedad custom. El bloque de codigo se actualiza de inmediato.

  6. 6
    Copia y comparte

    Haz clic en Copiar CSS para poner el codigo generado en tu portapapeles. Haz clic en Compartir para copiar una URL con todos tus ajustes actuales.

Referencia CSS

Reglas del abreviado CSS

Reglas del abreviado CSS
ValoresSignificadoEjemplo
1 valorLas cuatro esquinas son igualesborder-radius: 8px
2 valoresAI+ID primero, AD+II despuesborder-radius: 8px 4px
3 valoresAI, AD+II, IDborder-radius: 8px 4px 12px
4 valoresAI, AD, ID, II (sentido horario)border-radius: 8px 4px 12px 2px

Preguntas frecuentes

Que es border-radius en CSS?
La propiedad CSS border-radius redondea las esquinas de un elemento. Puedes establecer un solo valor para redondear las cuatro esquinas por igual, o valores individuales por esquina para formas asimetricas. Los valores en porcentaje crean curvas elipticas que se adaptan a las dimensiones del elemento.
Cual es la diferencia entre los modos Simple, Avanzado y Blob?
Simple permite definir un radio por esquina (opcionalmente vinculado). Avanzado da a cada esquina un radio horizontal y vertical independiente, produciendo arcos elipticos. Blob genera formas organicas libres con valores porcentuales, con un boton Aleatorio para explorar rapidamente.
Como funciona la salida de Tailwind?
Los valores que coinciden con la escala Tailwind v3/v4 (0, 2, 4, 6, 8, 12, 16, 24, 9999 px) se asignan a clases con nombre como rounded-lg. Los valores no estandar usan sintaxis arbitraria: rounded-[5px]. El modo Avanzado (eliptico) no puede representarse con las utilidades de Tailwind, por lo que se muestra el abreviado CSS.
Puedo compartir mis ajustes con otra persona?
Si. Haz clic en Compartir y la URL completa — con todos tus ajustes actuales — se copia al portapapeles. Cualquiera que abra esa URL vera la misma configuracion.
Para que sirve el control Suavidad en modo Blob?
La suavidad anade una onda cosmetica sutil solo a la vista previa — hace que la forma parezca mas organica. No afecta al CSS generado, que siempre usa los valores porcentuales brutos de las esquinas.
Que ocurre cuando los radios de esquina se superponen?
Si la suma de dos radios adyacentes supera la longitud del borde del elemento, el navegador reduce automaticamente todos los radios de forma proporcional. La herramienta muestra una advertencia cuando se detecta esta condicion.