Generador de Bordes Redondeados CSS: Crea Esquinas Redondeadas Visualmente
¿Necesitas esquinas redondeadas en una tarjeta, botón o avatar? El Generador de Radio de Borde CSS te permite construir valores de border-radius visualmente: usa un valor para todas las esquinas o establece cada esquina por separado, elige px o %, y copia el CSS con un clic.
Ejemplo: Elige la preconfiguración "Mediana" para 8px en todas las esquinas, o "Círculo" para 50% (perfecto para avatares cuadrados). Usa "Por esquina" para redondear solo la parte superior (por ejemplo, modales) o la parte inferior (por ejemplo, hojas inferiores). Cambia el fondo de la vista previa para ver la forma claramente. Copia el CSS y pégalo en tu hoja de estilos.
¿Qué es border-radius?
border-radius es una propiedad CSS que redondea las esquinas de la caja de borde de un elemento. Puedes establecer un valor para las cuatro esquinas o establecer cada esquina por separado (superior izquierda, superior derecha, inferior derecha, inferior izquierda). Los valores pueden ser en px (tamaño fijo) o % (relativo al elemento) — 50% en un cuadrado hace un círculo.
¿Por qué usar un generador de radio de borde?
Retroalimentación visual — Ve la forma redondeada en una caja de vista previa antes de copiar el código.
Control por esquina — Redondea solo algunas esquinas (por ejemplo, solo la parte superior para modales) sin memorizar el orden de cuatro valores.
Unidades — Cambia entre px y %; usa preconfiguraciones como Píldora (9999px) o Círculo (50%) y ajusta desde allí.
Preconfiguraciones — Ninguna, Pequeña, Mediana, Grande, XL, Píldora, Círculo, Solo superior, Solo inferior.
Sin registro — Gratis, del lado del cliente, y funciona sin conexión una vez que la página está cargada.
Cómo funciona la herramienta
- Usa la vista previa para ver el radio de borde actual (y opcionalmente cambia el fondo de la vista previa).
- Elige "Todas las esquinas iguales" para un valor, o "Por esquina" para cuatro valores (superior izquierda, superior derecha, inferior derecha, inferior izquierda).
- Elige unidad: px o %.
- Copia el CSS de la salida y pégalo en tu proyecto.
- Prueba preconfiguraciones (por ejemplo, Círculo, Píldora, Solo superior) para comenzar un estilo.
Sintaxis: un valor se aplica a todas las esquinas; cuatro valores van en sentido horario desde la superior izquierda.
Casos de uso
Tarjetas y paneles — Esquinas ligeramente redondeadas (por ejemplo, 8px) para un aspecto moderno.
Botones — Radio pequeño para botones o forma de píldora para píldoras de ancho completo.
Avatares e íconos — 50% en un elemento cuadrado para un círculo.
Modales y hojas — Esquinas superiores redondeadas solo, o solo inferiores, para superposiciones adjuntas.
Preguntas Frecuentes
¿Cuándo debo usar px vs %?
Usa px para redondeo fijo (por ejemplo, 8px en tarjetas). Usa % cuando quieras que el radio se escale con el elemento — 50% en un cuadrado da un círculo; en un rectángulo da extremos similares a una píldora.
¿Qué es una forma de píldora?
Una píldora es un rectángulo con extremos cortos completamente redondeados. Usa un valor grande (por ejemplo, 9999px) o 50% para que el radio sea al menos la mitad de la longitud del lado, dando extremos semicirculares.
Prueba el Generador de Radio de Borde CSS
CSS Border Radius Generator
Generate CSS border-radius values visually. Set one value for all corners or per-corner radii in px or %. Copy the CSS instantly.
The CSS Border Radius Generator is free, works in your browser, and requires no sign-up. Choose all-corners or per-corner, set px or %, try presets, and copy the CSS with one click — perfect for cards, buttons, avatars, and modals.
Related Tools
- CSS Box Shadow Generator — Create box-shadow values visually
- Gradient Generator — Create linear, radial, and conic CSS gradients
- Color Contrast Checker — Check contrast ratios for accessibility
- Font Pairing — Preview and test typography combinations