Vamos a usar un párrafo con las siguientes reglas de
estilo para especificar el ancho de sus bordes. También definimos border-style:
solid para que sea visible (el valor inicial para el estilo del borde
es none).
.Parrafo1 {border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 4px;
border-style: solid;}
Este es el párrafo de prueba. Tiene un borde superior
fino (thin), un borde derecho de grosor medio (medium),
uno inferior grueso (thick) y un borde izquierdo de 4 pixeles.
Cada navegador puede usar distintos grosores para thin, medium y thick pero
siempre resultará uno más ancho que el anterior (en ese orden,
por supuesto). Para el borde izquierdo usamos una medida específica (4
pixeles) que puede darnos una idea, por comparación, de cuáles
son los grosores que usa el navegador para las palabras clave anteriores. Observen
que al no tener relleno (padding), los bordes tocan el contenido del párrafo.
En los siguientes párrafos se puede observar el efecto de usar la propiedad resumida "border-width" con 1, 2, 3 y 4 valores.
Si se especifica un solo valor: border-width: thin,
este se aplica a los cuatro lados del párrafo:
Un párrafo con border-width: thin
Con dos valores especificados: border-width: thin thick,
el primero (thin) define el grosor de los bordes superior e inferior, el segundo
(thick) los bordes derecho e izquierdo:
Un párrafo con border-width: thin thick
Especificando tres valores, border-width: thin medium
thick , se aplican en este orden: El primero (thin) al borde superior,
el segundo (medium) al derecho e izquierdo, y el tercero (thick) al inferior.
Un párrafo con border-width: thin medium thick
Finalmente, especificando cuatro valores, border-width:
2px medium 8px 12px, estos se aplican en este orden: arriba(2px), derecha(medium),
abajo(8px), izquierda(12px).
Un párrafo con border-width: 2px medium 8px 12px