Border-color

Las propiedades de color del borde se rigen con normas muy similares a las del ancho del borde, por eso vamos a aprovechar esta página para observar algunos efectos que se pueden conseguir usando las propiedades de los márgenes, rellenos y bordes que hemos visto hasta el momento.

.Parrafo1 {margin: 0 25%;
           padding: 8px;
           border-width: thin thick thick thin;
           border-color: blue navy navy blue;
           border-style: solid;
           background: #CCCCFF;}

Este es el párrafo de prueba. Por medio de la propiedad resumida "margin" le hemos definido sus márgenes superior e inferior iguales a cero (0) y los márgenes izquierdo y derecho de un 25% del ancho de su bloque de contención (BODY, en este caso). Con "padding" le aplicamos un relleno de 8 pixeles en todos sus lados. Con "border-width" le pusimos los bordes superior e izquierdo finos, y los bordes derecho e inferior gruesos. Con "border-color" le dimos un color azul a los bordes finos y un azul marino a los bordes gruesos. Finalmente usamos dos propiedades que aún no hemos visto en esta guía: "border-style: solid" para que el borde sea visible y le dimos un color azul claro al fondo mediante la propiedad "background" (este color también define el color de fondo del relleno).

Con algunos pequeños cambios en la hoja de estilo anterior, vamos a hacer que nuestro párrafo dé la impresión de estar incrustado en la página:

.Parrafo2 {margin: 0 25%;
           padding: 8px;
           border-width: medium thin thin medium; /* era thin thick thick thin */
           border-color: navy blue blue navy;     /* era blue navy navy blue   */
           border-style: solid;
           background: #FFFFFF;}                  /* era #CCCCFF               */

En el párrafo anterior, usando bordes de distinto grosor y color, conseguimos que diera la sensación de estar sobresaliendo de la página. Con algunos pocos cambios en las propiedades "border-width" y "border-color" logramos el efecto contrario, haciendo aparecer al párrafo como si estuviera metido dentro de la página. Para reforzar el efecto usamos un fondo blanco.