CSS | Border-radius & Border-width

Muy bien, continuemos un poco con la fructuosa relación entre las propiedades border-radius y border width.


Por un lado tenemos border-witdh que nos permite dar un ancho específico a los bordes, y por otro lado border-radius que nos permite redondear las esquinas teniendo como referencia el radio vertical y horizontal de un cuarto de elipse que nos determinará la curvatura.


En el siguiente ejemplo veremos algo que hemos visto muchas veces, un div con un ancho de borde idéntico en los cuatro bordes y con una curvatura de mismo radio para todas las esquinas,la relación entre las propiedades empieza en la curvatura de la parte interior del borde que se determina por el radio menos en ancho de borde :

border-width:2px; 
border-radius:10px;

Si el resultado de Radio menos ancho de borde da como resultado un valor negativo, entonces se considera el valor como cero, se ve algo así (la parte interior del borde no tiene curvatura):

  border-width: 20px; 

border-radius: 18px;

hasta ahora hemos visto la relación entre border-witdh y border-radius en un elemento que tiene siempre el mismo ancho de borde, ahora bien, cuando dos bordes adyacentes tienen diferentes grosores la curvatura  va a mostrar una transición suave entre los bordes más gruesos y delgados, esto nos da mucho juego a la hora de crear. (Si el centro de la curvatura exterior y el de la curvatura interior son diferentes  la curva interior no puede ser un cuarto de elipse completa.):

border-width:10px 20px;
 border-radius:50px;



algunos ejemplos:

La combinación de los parámetros (radios horizontales, verticales y ancho de borde) puede dar muchas alternativas a la hora de trabajar con los objetos, de todos eso queda a criterio del programador o maquetador. 

espero que este articulo les haya sido de utilidad. 

Gracias y hasta la próxima!!!