Generador de Border Radius CSS
Genera border-radius CSS de forma visual con vista previa en vivo, controles por esquina, opción para enlazar todas las esquinas y unidades en px o porcentaje.
Redondea las esquinas de cualquier elemento de forma visual con este generador gratuito de border-radius CSS. Mueve un control para las cuatro esquinas a la vez o desvincúlalas para redondear cada esquina por separado, alterna entre píxeles y porcentaje y observa cómo la vista previa en vivo se actualiza al instante. Cuando quede como quieres, copia una regla border-radius limpia: todo se ejecuta en tu navegador, sin instalar nada.
¿Qué es un generador de border-radius CSS?
Un generador de border-radius CSS es una herramienta visual que crea la propiedad border-radius por ti. En lugar de adivinar valores, arrastras los controles de cada esquina y observas una vista previa en vivo, luego copias el CSS exacto del border-radius para pegarlo en tu hoja de estilos. Usa la forma corta de un solo valor cuando todas las esquinas son iguales y escribe el atajo de cuatro valores cuando difieren.
Cómo generar un border-radius
Mantén las esquinas enlazadas para un redondeo uniforme o desvincúlalas para dar forma a cada esquina por separado. Elige píxeles o porcentaje y copia la regla generada cuando la vista previa quede como quieres.
- Deja activado Enlazar todas las esquinas para redondear todas por igual.
- Arrastra el control de una esquina para fijar el radio y ver cómo se actualiza la vista previa.
- Desvincula las esquinas para redondear cada una por separado.
- Alterna la unidad entre px y % para cambiar cómo se ajusta el radio.
- Haz clic en Copiar CSS para obtener la regla border-radius lista para pegar.
¿Por qué usar este generador de border-radius?
- Vista previa en vivo que se actualiza al instante con cada ajuste de esquina.
- Enlaza todas las esquinas para un radio uniforme o desvincúlalas para un control total.
- Alterna entre unidades px y % con un solo clic.
- Genera la forma corta cuando las esquinas coinciden y el atajo cuando difieren.
- Un clic copia una regla border-radius limpia y lista para pegar.
- 100% gratis y privado: todo se ejecuta en tu navegador.
Preguntas frecuentes
¿En qué orden van los cuatro valores del border-radius?
El atajo de cuatro valores lista las esquinas en el sentido de las agujas del reloj empezando por la superior izquierda: border-radius: superior-izquierda superior-derecha inferior-derecha inferior-izquierda. Cuando las cuatro son iguales, puedes usar un solo valor, como border-radius: 12px.
¿Debo usar px o porcentaje para el border-radius?
Los píxeles dan un radio de esquina fijo que se mantiene igual sin importar el tamaño del elemento. El porcentaje es relativo a las dimensiones del elemento, así que 50% en un cuadrado lo convierte en un círculo y es ideal para redondeos fluidos y adaptables.
¿Cómo hago un círculo perfecto o una forma de píldora?
Define border-radius en 50% en un elemento con el mismo ancho y alto para obtener un círculo. Para una forma de píldora o cápsula en un elemento más ancho, usa un valor grande como 9999px para que los lados cortos queden totalmente redondeados.
¿Puedo redondear solo algunas esquinas?
Sí. Desactiva Enlazar todas las esquinas y define cada esquina por separado. Una esquina con radio 0 permanece cuadrada, así que puedes redondear solo las esquinas superiores de una tarjeta, por ejemplo.