Skip to content

Generador de border-radius

In-browser only Simple / Advanced / Blob Shareable URL
Unidad
Esquinas

200 x 200 px

Elemento de vista previa
Tamano (px)
Borde
Fondo
border-radius: 0px;

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

Generador de border-radius

Border radius · Simple

Esc para salir
Herramientas relacionadas Ver todo

Resumen

Redondea esquinas visualmente y copia el CSS

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

  • Modos Simple, Avanzado (eliptico) y Blob
  • Vista previa en directo con panel dividido, tamano y estilo ajustables
  • Salida CSS abreviado, completo, Tailwind y propiedad custom
  • URL para compartir — todos los ajustes codificados en el enlace
  • Se ejecuta por completo en tu navegador
  • Se ejecuta por completo en tu navegador — nada se sube
  • Ningun dato de diseno se envia a ningun servidor
  • Funciona sin conexion una vez cargado
  • Redondear esquinas de botones y tarjetas y copiar el CSS
  • Crear formas en pilula o capsula con un radio elevado
  • Disenar formas blob organicas para contenedores decorativos
  • Reproducir el radio de esquina de un sistema de diseno
  • Copiar el CSS border-radius listo para usar en cualquier formato

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. La URL de la pagina se actualiza automaticamente con tus ajustes — copiala o guardala en favoritos para compartir la configuracion exacta.

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. La URL de la pagina se actualiza automaticamente con todos tus ajustes actuales (mira la insignia URL para compartir). Copia la barra de direcciones o guarda la pagina en favoritos; cualquiera que abra ese enlace 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.