Seguimos con las definiciones de los estilos para las capas, esta vez hablaremos de la propiedad border.

Border
La propiedad border es bastante sencilla, pues nos permite dar estilos a los bordes de nuestra capa, ya sea de tamaño, color o tipo.

Se trata de una de las propiedades más versátiles porque  nos permite definir los valores para cada uno de los cuatro costados de nuestra capa de forma totalmente individual e independientemente del otro costado, así que vamos a desglosarlos uno a uno.

• border-color: #ffcc00;
  Esta propiedad nos permitirí­a definir el color de borde para nuestra capa. Si utilizamos la instrucción tal y como la hemos puesto en el ejemplo, nos pintaría el borde de los 4 costados de nuestra capa de color #ffcc00. Si lo que deseamos es pintar simplemente uno de los lados usarí­amos la misma propiedad pero indicando el costado que deseamos pintar: border-left-color para el izquierdo, border-top-color para el superior, border-right-color para el derecho o border-bottom-color para el inferior.
• border-style: solid;
  Nos  permite indicar el estilo del borde del elemento al que se lo aplicamos. Los diferentes estilos que podemos usar son:
  • none: evidentemente significa sin borde.
  • hidden: borde oculto. Aunque el resultado es similar al border none, recordad que un border hidden no se ve, pero si que ocupa el espacio asignado, mientras que el none directamente es sin borde.dotted: borde punteado (parecido al que sale sobre un enlace marcado)
  • dashed: borde de línea discontinua (como el de las figuritas para recortar)
  • solid: border sólido, una línea continua.
  • double:  borde sólido de doble línea.
  • groove: borde típico sombreado de las clásicas tablas web.
  • ridge: igual que el anterior pero con la sombra en la parte inferior.
  • inset: borde que simula el efecto de un botón presionado (aplicándole un efecto de bisel).
  • outset: borde que simula el efecto de un botón (con efecto de bisel).

Al igual que en el caso del border-color, los estilos del border-style también pueden ser aplicados de forma independiente a cada uno de los cuatro costados de nuestra capa: border-left-style para el izquierdo, border-top-style para el superior, border-right-style para el derecho o border-bottom-style para el inferior.

• border-width: 3px;
  Este estilo nos  permite indicar el tamaño del borde del elemento al que se lo aplicamos. El tamaño se lo debemos indicar con alguna de las unidades CSS.

  Como en los casos anteriores, podemos indicar el tamaño de cada borde mediante los atributos border-top-width para el borde superior, border-right-width para el borde de la derecha, border-bottom-width para el borde de abajo y border-left-width para el de la izquierda.

• border:2px solid red;
  Forma simplificada de introducir los estilos de un border. Usando la propiedad border, podemos definir el tamaño, el estilo y el color en una simple instrucción. En muchos casos veréis que algunos utilizan un orden distinto, poniendo primero el estilo, después el tamaño y finalmente el color… cada uno que utilice el sistema que mejor le vaya.

  Igual que  en los anteriores casos, este ejemplo nos pondría un borde rojo de 2 píxeles a los cuatro costados de nuestra capa. Si lo queremos podemos hacerlo individualmente con: border-top para el borde superior, border-right para el borde de la derecha, border-bottom para el borde inferior y border-left para el de la izquierda.

  Como pequeño truco final (por llamarlo así) os explico el sistema que uso para definir una capa en que, por ejemplo, solo uno de sus bordes es distinto al anterior:

border:2px solid #990000;
border-bottom:0;

En este caso primero defino un border de 2 píxels para toda la capa y acto seguido, anulo uno de ellos de forma que el resultado final es el de una capa en el que no existe borde inferior.