Generador de Border Radius CSS - Herramienta online gratuita

Características

Control de las cuatro esquinas

Modo unificado o independiente

Deslizador y entrada numérica

Vista previa en directo y código CSS

Cómo Usar

1. Arrastra el deslizador de radio — la tarjeta neutra previsualiza las esquinas a tamaño real.

2. Cambia a «Por esquina» para dar forma a cada esquina por separado.

3. Copia el CSS — usa la forma válida más corta.

Sobre esta herramienta

Las esquinas redondeadas son una línea de CSS, pero acertar con el valor es más fácil cuando puedes verlo. Este generador previsualiza border-radius en una tarjeta neutra a tamaño real mientras arrastras un único control deslizante o das forma a cada esquina por separado. Después escribe la declaración válida más corta: un valor cuando todas las esquinas coinciden, y dos, tres o cuatro cuando difieren, en el orden superior izquierda, superior derecha, inferior derecha e inferior izquierda. Los radios pequeños de 4–8 px van bien en botones y campos, los de 12–24 px dan un aire amable a las tarjetas, y los valores muy grandes convierten elementos bajos en píldoras. Cambia el fondo del escenario para ver cómo se lee la forma sobre superficies claras y oscuras antes de copiar el CSS a tu hoja de estilos.

Preguntas Frecuentes

¿En qué orden van los cuatro valores de border-radius?

En el sentido de las agujas del reloj desde la esquina superior izquierda: superior izquierda, superior derecha, inferior derecha, inferior izquierda. Con dos valores, el primero se aplica a superior izquierda e inferior derecha, y el segundo a superior derecha e inferior izquierda.

¿Cómo hago un botón con forma de píldora o un círculo?

Para una píldora, usa un radio de al menos la mitad de la altura del elemento, o simplemente un valor muy grande como 9999px. Para un círculo, da al elemento el mismo ancho y alto y pon border-radius a 50%.

¿Por qué mi esquina redondeada se corta o deja ver el fondo?

Los elementos hijos pueden desbordar la esquina redondeada. Añade overflow: hidden al contenedor o da al hijo un radio igual, para que imágenes y fondos sigan la curva.

¿Puedo crear esquinas elípticas?

CSS permite radios horizontales y verticales distintos separados por una barra, por ejemplo border-radius: 50% / 20%. Este generador se centra en esquinas circulares en píxeles, que cubren la mayor parte del trabajo de interfaces; puedes añadir la sintaxis con barra a mano para formas especiales.

¿border-radius afecta al diseño o al área de clic?

No. Solo cambia cómo se pinta y recorta el elemento. El elemento conserva su caja rectangular en el diseño, y los clics en las esquinas transparentes siguen registrándose en él.