Las propiedades de los bordes en CSS

Los bordes en CSS son bastantes interesantes, ya que con éstos podemos crear desde un simple borde por debajo de algun texto, hasta crear un bonito menú sin imágenes.

La sintaxis para definir un borde en CSS es la siguiente:

border: {anchura} {estilo} {color};
border-bottom: {anchura} {estilo} {color};
border-top: {anchura} {estilo} {color};
border-left: {anchura} {estilo} {color};
border-right: {anchura} {estilo} {color};

un ejemplo sería:
border: 1px solid #000000;

En la anchura de los bordes podemos poner algun tamaño en pixéles(px), en ems(em), porcentaje(%) o en puntos(pt), son muchas unidades pero aqui una equivalencias:

.5em = 6pt  = 8px  = 50%
1em  = 12pt = 16px = 100%
2em  = 24pt = 32px = 200%
3em  = 36pt = 48px = 300%

En el estilo del borde se indica el estilo del borde, es decir si es:

Solid Dotted Dashed Double Groove Ridge Inset Outset

En la parte del color puedes insertar un color en RGB o en Hexadecimal, pero puedes conseguirlos de Colores en RGB o Hexadecimal.

Hay que tomar en cuenta que los bordes no son interpretados de la misma manera por Mozilla Firefox que por Internet Explorer(6 y anteriores).

Ya que si creamos una capa de 70x200 y con un borde de 10px:

Mozilla Firefox coloca el borde por fuera de la capa, es decir el borde esta alrededor de la capa, es decir que la capa aumenta a 90x220.

Internet Explorer lo que hace es colocar el borde por dentro de la capa, es decir que el ancho de la capa con borde es el mismo es decir 70x200.