Hablando de bordes con CSS

La propiedad border es aquella que nos permite eso, agregar un borde a casi cualquier etiqueta. Sólo es necesario indicar el grosor, el tipo de borde y el color para que, aplicada a un elemento, este quede enmarcado en sus cuatro bordes.

Siempre insisto con lo mismo, toda etiqueta es un rectángulo así que tiene cuatro lados y la propiedad border nos da la posibilidad de identificarlos por separado:

border: 1px solid #FFF; agregará un borde en los cuatro
border-top: 1px solid #FFF; agregará un borde arriba
border-bottom: 1px solid #FFF; agregará un borde abajo
border-left: 1px solid #FFF; agregará un borde a la izquierda
border-right: 1px solid #FFF; agregará un borde a la derecha

El borde ocupa espacio por lo tanto, si el elemento tiene determinado ancho, cuando usamos esta propiedad, ese ancho se incrementará sin importar si hemos definido el ancho con width o no; a veces, eso crea problemas cuando se diagrama una página; por ejemplo, si tuviéramos un DIV de 400 pixeles de ancho y adentro colocamos otros dos de 200 pixeles cada uno y a esos les ponemos la propiedad float, se verán uno al lado del otro:

Pero si a uno de ellos le agregamos un borde, se irá para abajo porque no hay suficiente espacio:

Para solucionar esto, debemos aumentar el ancho del contenedor o reducir el ancho del DIV con el borde tantos pixeles como sea necesario.

Algo similar ocurre cuando se colocan bordes en elementos inline al utilizar estilos de hover; por ejemplo, si tuviéramos esta definición:

a:hover {border:3px solid #FFF;}

al colocar el cursor encima de este enlace, todo el texto se desplazará:

Donec quis velit orci. Nam euismod enim ut rutrum luctus ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.

Esto, se soluciona colocándole un borde de color transparente al enlace yde ese modo, ya estamos "reservando" el espacio necesario:

a {border:3px solid transparent;} 
a:hover {border:3px solid #FFF;}

Donec quis velit orci. Nam euismod enim ut rutrum luctus ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.

Pero border no es la única propiedad que nos permite recuadrar etiquetas, hay otra que no utilzamos mucho y que hace lo mismo, se trata de la propiedad outline. Pero, en realidad, no hace lo mismo porque tiene dos caracterísiticas particulares. La primera es que no nos permite definir cuál borde agregar, siempre se agregarán los cuatro; la segunda es que no ocupa espacio así que en el ejemplo anterior, si usáramos outiline en lugar de border, el DIV no bajaría:

Teniendo entonces estas dos propiedades a nuestra disposición, podemos utilizarlas juntas para crear bordes dobles sabiendo que outline será siempre el borde exterior y border será el borde interior:

.borderdobles {
  border: 5px solid #FFFF00;
  outline: 5px solid #FF0088;
  padding:10px;
  margin:0 auto;
  width:300px;
}

Donec quis velit orci. Nam euismod, enim ut rutrum luctus; ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.

Un detalle a tener en cuenta es que outline no admite curvas y redondeces así que no se ve afectado por las propiedades border-radius:

.borderdobles {
  border: 5px solid #FFFF00;
  outline: 5px solid #FF0088;
  padding: 10px;
  margin: 0 auto;
  width: 300px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

Donec quis velit orci. Nam euismod, enim ut rutrum luctus; ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.

En algunos casos, se utiliza el borde para resaltar los enlaces; se hace para reemplazar la propiedad text-decoration:underline así que en lugar de esto:

a:hover {text-decoration: underline;}

se coloca algo así:

a:hover {border-bottom: 2px dotted red;}

ya que, border tiene muchas más opciones; de ese modo, el "subrayado" puede ser definido con otro color o con otro tipo distinto de "sólido":

Donec quis velit orci. Nam euismod enim ut rutrum luctus ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.

Con CSS3 hay un tercer tipo de borde posible que son las sombras aunque este método no será aplicable en Internet Explorer ya que por ahora, en ese navegador, las sombras son tratadas de manera diferente:

.borderdobles {
  border: solid 5px #FFFF00;
  padding:10px;
  margin: 5px auto;
  width: 300px;
  -moz-box-shadow: 0 0 0 5px #FF0088;
  -webkit-box-shadow: 0 0 0 5px #FF0088;
  box-shadow: 0 0 0 5px #FF0088;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius: 5px;
}

Donec quis velit orci. Nam euismod, enim ut rutrum luctus; ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.

Si se trata de imágenes hay una alternativa extra que nos permitiría tener tres bordes; para eso, lo que haremos es establecer un padding es decir, una "separación" y luego, le colocamos un fondo de color:

.borderdobles {
  background-color: #883000;
  border: solid 5px #FFFF00;
  display: block;
  padding:5px;
  margin: 5px auto;
  -moz-box-shadow: 0 0 0 5px #FF0088;
  -webkit-box-shadow: 0 0 0 5px #FF0088;
  box-shadow: 0 0 0 5px #FF0088;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius: 5px;
}