CSS1 | Border-width

He saltado de manera un poco drástica a CSS1 pero hay un motivo para este salto, quiero llegar a la relacion entre border-radius y border-witdh, y para que todo sea mas claro haremos un repaso de border-witdh a modo de introducción a la siguiente publicación en la que veremos, por fin,  la relación entre estas dos propiedades.

La propiedad de CSS border-width es compatible con los principales navegadores.

Border-width, como en la mayoría de estilos, tiene un modo abreviado:

border-width: value;

Donde “value” es la medida que introducimos para definir la anchura de los bordes, esta medida se puede indicar mediante las palabras: thin (fino o delgado),  medium (medio)  y  thick (ancho) o utilizando unidades relativas o absolutas. De todos modos la unidad  que nos permite un control más preciso es el Pixel y es el que utilizaremos en este artículo.

Border-width, acepta de uno a cuatro valores, el orden de aplicación es: borde superior, borde derecho, borde inferior y borde izquierdo: 

border-width: 10px 20px 30px 40px;

Si se indican tres valores, el orden de aplicación será: borde superior, borde izquierdo y derecho, el tercer valor se aplica al borde inferior:

border-width:10px 20px 30px;

Si se indican dos valores, el primero se aplica al borde superior e inferior y el segundo valor se aplica al borde izquierdo y derecho:

border-width: 10px 20px;

Si se indica un solo valor, se aplica a los cuatro bordes:

border-width:10px;

Podemos definir un border-width para cada uno de los bordes utilizando top, left, rigth  y  bottom. 
En el siguiente ejemplo atribuimos un valor whidth al borde superior, el resto de bordes mantiene el valor por defecto que es "medium":

border-top-width: 10px;

Es importante recordar que el “border-style” por defecto es “none” por lo que debemos asignar un estilo de borde sino border-width simplemente no se verá.

Hasta aquí llega el articulo de hoy, espero que haya sido de vuestro agrado, en el próximo articulo veremos la relación entre border-width y border-radius.

hasta la próxima!!!