Developer ToolsGenerador de Radio de Borde
Crea visualmente formas CSS complejas con border-radius y control independiente de esquinas. Previsualiza en tiempo real y copia el código CSS listo para usar.
Configuración de Esquinas
Unidad:
Vista Previa y Código CSS
border-radius: 8px
Abreviado
.element {
border-radius: 8px;
}Detallado
.element {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}Herramientas Relacionadas
Acerca del Generador de Radio de Borde
Cómo Funciona
- Ajusta cada esquina con los controles deslizantes o campos numéricos
- Activa 'Vincular todas las esquinas' para controlar las cuatro esquinas simultáneamente
- Selecciona una unidad (px o %) según si deseas un tamaño fijo o relativo
- Usa los presets para aplicar formas comunes como círculo, píldora o cuadrado
- Personaliza el fondo y el color del elemento para una vista realista
- Copia el código CSS abreviado o detallado con un clic
Casos de Uso Comunes
- Diseñar botones, tarjetas y campos de entrada con esquinas redondeadas
- Crear etiquetas y badges con forma de píldora en diseño de interfaz
- Construir avatares e iconos circulares con border-radius al 50%
- Generar formas asimétricas únicas para diseños creativos
- Prototipar componentes de interfaz con control preciso de esquinas
- Aprender y experimentar con los valores de CSS border-radius
Preguntas Frecuentes
¿Qué es CSS border-radius?
CSS border-radius es una propiedad que redondea las esquinas del cuadro de borde de un elemento. Acepta de uno a cuatro valores que definen los radios de las esquinas superior izquierda, superior derecha, inferior derecha e inferior izquierda.
¿Cómo uso el Generador de Radio de Borde?
Usa los controles deslizantes o los campos numéricos para ajustar cada esquina de forma independiente. La previsualización en vivo se actualiza al instante y puedes copiar el código CSS generado con un clic.
¿Puedo establecer un valor diferente para cada esquina?
Sí. Desactiva la opción 'Vincular todas las esquinas' para controlar cada esquina (superior izquierda, superior derecha, inferior derecha, inferior izquierda) de forma independiente para formas asimétricas.
¿Cuál es la diferencia entre CSS abreviado y detallado?
La propiedad abreviada border-radius establece las cuatro esquinas a la vez. Las propiedades detalladas (border-top-left-radius, border-top-right-radius, etc.) establecen cada esquina individualmente.
¿Cómo hago un círculo con CSS border-radius?
Establece border-radius al 50% en un elemento cuadrado. Usa el preset 'Círculo' en esta herramienta para aplicarlo al instante.
¿Cómo hago una forma de píldora/cápsula?
Establece border-radius a un valor muy grande (por ejemplo, 9999px) para crear una forma de píldora. Usa el preset 'Píldora' para aplicarlo con un clic.
¿Border-radius admite valores en porcentaje?
Sí. Los valores porcentuales son relativos a las dimensiones del elemento: 50% crea una forma circular en un elemento cuadrado. Esta herramienta admite unidades de píxeles (px) y porcentaje (%).
¿Qué son los valores abreviados de border-radius con dos valores?
Con dos valores, el primero se aplica a las esquinas superior izquierda e inferior derecha, y el segundo a las esquinas superior derecha e inferior izquierda.
¿Es compatible el CSS generado con todos los navegadores?
Sí. La propiedad border-radius es compatible con todos los navegadores modernos e Internet Explorer 9+.
¿Puedo previsualizar la forma con un color de fondo?
Sí. La previsualización en vivo muestra la forma con un color de fondo personalizable para que veas exactamente cómo se verán las esquinas redondeadas.
¿Cómo restablezco los valores predeterminados?
Haz clic en el botón 'Restablecer' para restaurar todas las esquinas a 8px, el valor predeterminado más utilizado.
¿Qué presets están disponibles?
Esta herramienta incluye presets para formas comunes: Cuadrado (0px), Leve (4px), Redondeado (8px), Extra redondeado (16px), Píldora (9999px) y Círculo (50%).