¡Hola gente bonita!👋
Casi todos los botones, modales, cards, iconos y logotipos que ves en las interfaces tienen las esquinas redondeadas.
Puede establecer la curvatura en cada una de las cuatro esquinas de un elemento con la propiedad border-radius especificando el radio del circulo.
Cuanto mas grande es este radio mayor efecto de redondeo conseguiremos. El redondeo puede ser un circulo o una elipse.
Vamos a profundizar en la propiedad border-radius.
- Si utiliza un único valor, significa que las cuatro esquinas se redondean por ese valor.
- Si utiliza dos valores, se aplica el primer valor a las esquinas top-left y bottom-right y el segundo valor a las esquinas top-right y bottom-left.
ℹ️ Si se omite el valor inferior derecho (bottom-right) es igual que el superior izquierdo (top-left) y si se omite el inferior izquierdo (bottom-left) es igual que el superior derecho (top-right), es decir, La esquina opuesta en ambos casos.
- Si utiliza tres valores, se aplica el primer valor a la esquina top-left, el segundo valor a las esquinas top-right y bottom-left y el tercer valor a la esquina bottom-right.
ℹ️ Como no hay un cuarto valor asignado, lo que se hace es tomar el de la esquina correspondiente. Cuando se llega a la esquina inferior izquierda (bottom-left) se toma el valor de la esquina que tiene enfrente, es decir, la esquina superior derecha (top-right).
- Si utiliza los cuatro valores se aplica a cada esquina del elemento. Recuerda que empezamos por la esquina superior izquierda y vamos girando en el sentido de las agujas del reloj, hasta terminar en la esquina inferior izquierda.
Propiedades individuales de redondeo
También puede especificar cada una de las esquinas usando las propiedades individuales, esto es verboso pero tiene la ventaja de ser explicito para usted o cualquier futuro lector de su código.
También podemos utilizar dos valores en cada propiedad individual para crear una elipse. Por ejemplo:
Profundizaremos en esto en unos momentos...
Valores
La propiedad border-radius puede aceptar cualquier unidad de longitud CSS válida. Puedes especificar el valor de border-radius en porcentajes. Esto es útil para crear una forma de círculo o elipse:
.element {
border-radius: 50%;
width: 200px;
}
También podrías mezclar porcentajes con valores de longitud fija.
¿Cuál es la diferencia entre usar porcentajes y pixeles?
El valor del porcentaje se basa en la anchura y la altura del elemento dado, mientras que los pixeles no. Por lo tanto, si utiliza porcentajes en un rectángulo, ya no tendrá esquinas simétricas.
Aquí hay un ejemplo que muestra la diferencia entre border-radius: 50px y border-radius: 50% aplicado a un rectángulo.
¿Como funciona la propiedad border-radius?
Si dibujamos un elemento de 300px de alto y 300px de ancho y un border-top-left-radius: 100px, el elemento comienza a curvarse desde la esquina superior izquierda ya que empieza desde esa esquina y avanza hasta llegar a 100px de lo ancho del elemento.
Después hace lo mismo en el lado vertical que es la altura, es decir, comienza desde la misma esquina superior izquierda y baja 100px, por lo tanto, se crea esta área redondeada entre ambos lados.
Si dibujamos una caja, como la que vemos en la imagen, que solo tenga la parte de la esquina superior izquierda curvada, esa caja tendría 100px de ancho y 100px de alto, es decir el valor que le dimos a border-top-left-radius
Radios de borde superpuestos
Jay Sitter explicó lo que ocurre cuando el valor del radio de una esquina es tan grande que se solapa con el radio de otra esquina. Como en este ejemplo:
Estamos aplicando un radio de 40px en las esquinas superior izquierda e inferior izquierda, así que ¿por qué son cuadradas? Porque el valor 999em de las otras dos esquinas las está cubriendo. Jay profundiza en las matemáticas detrás de esto y cómo evitar que suceda, por lo que vale la pena leer su articulo para obtener más contexto.
Elliptical Border Radius
La propiedad border-radius también se puede utilizar para crear bordes elípticos. El radio elíptico se establece especificando dos valores para cada eje en la misma esquina, separados por espacio.
El primer valor es el radio es la dirección horizontal, el segundo es en la dirección vertical.
Cuando se utilizan radios elípticos con valores muy grandes, la curva de una esquina puede afectar a la curva de las esquinas adyacentes, especialmente las que tienen valores de radio más pequeños.
En este ejemplo, sólo cambiamos el valor de la curva de la esquina superior derecha. Observe, sin embargo, que todas las esquinas redondeadas del elemento son codependientes entre sí, incluso aquellas cuyos valores no estamos cambiando explícitamente.
Ocho valores separados por una barra
Ahora vamos a utilizar el shorthand border-radius para establecer todos los radios en valores diferentes para obtener esquinas irregulares
Para conseguirlo, solo hay que añadir una barra (/), los valores a la izquierda de la barra representan el radio horizontal para cada esquina, mientras que los que están a la derecha, representan el radio vertical.
Como puedes observar damos dos vueltas alrededor de nuestro elemento en el sentido de las agujas del reloj.
Radios anidados
Si tienes un elemento con bordes redondeados y esta dentro de otro que también tiene sus bordes redondeados y algo de padding, te habrás dado cuenta que, aunque ambos tengan el mismo border-radius, el elemento anidado no se va alinear bien con el elemento externo.
La razón es que, aunque coinciden en valor, no coinciden matemáticamente ya que la distancia que hay en las esquinas es mayor que el espacio de los lados del elemento.
Así que para calcular el radio ideal de un elemento anidado, debe utilizar una fórmula sencilla: outerRadius = innerRadius + spaceBetween (padding)
- outerRadius: Radio del borde del elemento padre.
- innerRadius: Radio del borde del elemento hijo.
- spaceBetween: Espacio de
paddingentre el elemento padre e hijo.
Esta fórmula asegura que el elemento anidado encaje perfectamente dentro del elemento padre, dando como resultado un aspecto más armonioso.
Aquí puede ser muy útil usar las custom properties:
.parent {
--padding: 8px;
--radius: 20px;
padding: var(--padding);
border-radius: calc(var(--radius) + var(--padding));
}
.nested { border-radius: var(--radius); }
Generadores
Referencias
Gracias por leer🦸🏻♀️
Mis redes sociales donde comparto notas de código:
▶️Youtube
📷Instagram
𝕏 (Twitter)
🎵Tik Tok
🔵Facebook
🐙GitHub
🔲Codepen
✍️Medium
Top comments (0)