Border Radius Generator
Generate border radius
Generate border radius Se ejecuta localmente en su navegador
border-radius: 12px;
About the
El Generador de radio de borde establece las cuatro esquinas de un cuadro de forma independiente, con una vista previa en vivo, y le brinda el CSS. El orden de la taquigrafía es lo que todo el mundo olvida: arriba a la izquierda, arriba a la derecha, abajo a la derecha, abajo a la izquierda, en el sentido de las agujas del reloj desde arriba a la izquierda. Un valor se aplica a las cuatro esquinas, dos valores se aplican a los pares diagonales y cuatro valores se dirigen a cada esquina por turno. Cuando los cuatro coinciden, la herramienta emite el formulario de valor único, que es el que realmente desea la mayor parte del tiempo.
Where people use the
- Hacer coincidir un radio con una especificación de diseño sin adivinar los valores de los píxeles.
- Redondear sólo las esquinas superiores de una tarjeta o un modal.
- Dando forma a un botón de pastilla, que tiene un radio de la mitad de la altura del elemento.
- Encontrar el radio que convierte un avatar cuadrado en un círculo.
How to use the
- 1
Arrastre un control deslizante de esquina
Cada esquina tiene su propio control deslizante de 0 a 150 píxeles. El cuadro de vista previa se redondea a medida que lo mueves.
- 2
Mantener las esquinas vinculadas o desvincularlas
Con Link activado, al mover cualquier control deslizante se mueven los cuatro juntos. Apáguelo para darle forma a las esquinas individuales, que es como se hace la cola de un globo de diálogo o la forma de una hoja.
- 3
Leer el CSS
Si los cuatro coinciden, obtendrás la taquigrafía de un solo valor. Si difieren, obtendrás la forma completa de cuatro valores en el sentido de las agujas del reloj.
- 4
Considere un porcentaje en su lugar
Un radio del 50 por ciento en un elemento cuadrado da un círculo. Cambie la unidad px por un porcentaje en su hoja de estilo si eso es lo que necesita.
Consejos y mejores prácticas
- Utilice porcentajes cuando el elemento cambie de tamaño, píxeles cuando no lo haga.
- Un botón de pastilla no es un radio fijo; tiene la mitad de la altura, por lo que 9999px es la respuesta vaga pero sólida.
- Mantenga el radio constante en todo un conjunto de componentes; mezclar 4px, 6px y 8px parece accidental.
Preguntas frecuentes
¿En qué orden están los cuatro valores?
En el sentido de las agujas del reloj desde arriba a la izquierda: arriba a la izquierda, arriba a la derecha, abajo a la derecha, abajo a la izquierda. Una mnemónica útil es que comienza donde empiezas a leer y gira como la esfera de un reloj.
¿Qué significan dos o tres valores?
Dos valores establecen las diagonales: el primero es arriba a la izquierda y abajo a la derecha, el segundo es arriba a la derecha y abajo a la izquierda. Tres valores establecidos arriba a la izquierda, luego arriba a la derecha y abajo a la izquierda juntos, luego abajo a la derecha.
¿Cómo hago un círculo?
Utilice el 50 por ciento en un elemento que ya sea cuadrado. El uso de píxeles solo da un círculo si el radio es igual a la mitad del ancho, lo que se rompe en el momento en que el elemento cambia de tamaño.
¿Puedo redondear las esquinas de forma diferente en sentido horizontal y vertical?
La sintaxis completa permite un radio elíptico escrito como valores horizontales, una barra y luego valores verticales. Esta herramienta emite la forma uniforme más simple, así que agregue la versión de barra a mano si necesita esa forma.
¿Por qué se recorta mi esquina redondeada?
Porque el contenido secundario no está recortado en el cuadro redondeado. Agregue desbordamiento oculto al elemento, o la imagen o el fondo dentro seguirá mostrando esquinas cuadradas.