Las propiedades CSS (border)

Y ahora le toca el turno a los bordes cuya propiedad genérica es border y que es una propiedad muy sencilla aunque posee un sinfín de posibles instrucciones.

Recordemos que, todo elemento de una página web es un rectángulo y por lo tanto, tiene cuatro bordes. La propiedad genérica border establece todas las propiedades que afectan a esos cuatro bordes al mismo tiempo y se usa para evitar escribir cada una de ellas por separado:
border-width | border-style | border-color

sintaxis en HTML
elemento {border: valores;}
por ejemplo: div {border: 2px solid #BB0000;}

sintaxis en JAVASCRIPT
elemento.style.{border='valores';
por ejemplo: this.style.background='2px solid #BB0000';

Donde el orden de los valores es: width style color. A su vez, cada una de ellas puede ser especificada por separado.

La propiedad border-color establece el color y por defecto su valor es igual al color del texto.

sintaxis en HTML
elemento {border-color: color;}
por ejemplo: div {border-color: #BB0000;}

sintaxis en JAVASCRIPT
elemento.style.borderColor='color';
por ejemplo: this.style.borderColor='#BB0000';

El color puede ser un nombre, un valor rgb() o un valor hexadecimal.

• Si establecemos un color, este se usará para los cuatro bordes.
• Si establecemos dos colores, el primero será el de los bordes horizontales y el segundo el de los verticales.
• Si establecemos tres colores, el primero será el del borde superior, el segundo el de los verticales y el tercero el del borde inferior.
• Si establecemos cuatro colores definirán los colores de los bordes superior, derecho, inferior e izquierdo respectivamente.
  

Los colores los separamos mediante espacios; por ejemplo:

table {border-color: red green blue;}

La propiedad border-width establece el grosor de los bordes.

sintaxis en HTML
elemento {border-width: valor;}
por ejemplo: div {border-width: 2px;}

sintaxis en JAVASCRIPT
elemento.style.borderWidth='valor';
por ejemplo: this.style.borderWidth='2px';

Al igual que con borderColor, podemos separar varios valores mediante un espacio y combinando unidades:

table {border-color: 2px 3cm 1.2em;}

Por último, la propiedad border-style establece el tipo de borde.

sintaxis en HTML
elemento {border-style: valor;}
por ejemplo: div {border-style: solid;}

sintaxis en JAVASCRIPT
elemento.style.borderStyle='valor';
por ejemplo: this.style.borderStyle='solid';

Los valores posibles a utilizar son: none, hidden, dotted, dashed, solid, double, groove, ridge, inset y outset.

Al igual que borderColor, podemos separar varios valores mediante un espacio:

table {border-style: solid dotted dashed;}

Cada borde puede ser definido de manera individual así que también existen las mismas propiedades para cada uno de ellos:

HTML		JAVASCRIPT
border-top	border-top-width	borderTop	borderTopWidth
	border-top-style		borderTopStyle
	border-top-color		borderTopColor
border-right	border-right-width	borderRight	borderRightWidth
	border-right-style		borderRightStyle
	border-right-color		borderRightColor
border-bottom	border-bottom-width	borderBottom	borderBottomWidth
	border-bottom-style		borderBottomStyle
	border-bottom-color		borderBottomColor
border-left	border-left-style	borderLeft	borderLeftStyle
	border-left-color		borderLeftColor
	border-left-width		borderLeftWidth

Muchos códigos pero, en la práctica, lo mas usual es que utilicemos border si queremos que todos sean iguales, es decir, si estamos recuadrando algo o, eventualmente las propiedades que controlan alguno de ellos (border-top, border-right, border-bottom, border-left):

LOS TITULO

ALGO

SEPARADOR

Es muy importante tener en cuenta que los navegadores agregan los bordes de diferente manera y eso puede causarnos trastornos que cuesta resolver. Algunas de esas diferencias se refieren al aspecto gráfico, por ejemplo IE muestra el estilo dotted como dashed, en lugar de puntos, pone rayas; pero, lo más significativo se refiere a dónde ubican los bordes.

Supongamos que tenemos dos elementos exactamente iguales pero a uno le colocamos un borde y al otro no. Por ejemplo:

<div style="width:250px; height:100px;background-color:Aquamarine;border:none;"></div>

Hemos creado un bloque de 250 pixeles de ancho por 100 pixeles de alto con un color de fondo cualquiera; podría ser nuestra sidebar. Hasta acá, no hay problema pero, decidimos que tenga un borde; seamos exagerados, digamos que el borde será de 10 pixeles de ancho:

<div style="width:250px;height:100px;background-color:Aquamarine;border:10px solid red;"></div>

¿Qué pasará? ¿cuánto medirá nuestro bloque? ¿Dónde se agrega el borde? ¿afuera o adentro de ese rectángulo?

Eso, dependerá del navegador. En Internet Explorer el borde se dibuja ADENTRO por lo que el bloque verde se reduce en 10 pixeles en todo su perímetro, tendremos entonces un "área verde" de 230 pixeles por 80 pixeles, el borde le ha "comido" superficie.

En Firefox el borde se dibuja AFUERA por lo que el bloque verde permanece del mismo tamaño pero requiere más espacio alrededor así que nuestro elemento, termina siendo de 270 pixeles por 120 pixeles.

En realidad, cualquiera de las dos alternativas puede ser aceptable y habrá quien defienda una posición o la otra, nuestro problema no es si la regla es buena o mala sino que hay dos diferentes y deberemos lidiar con ellas hasta que se pongan de acuerdo de una buena vez y nos dejen de fastidiar.

MÁS INFORMACIÓN:

Las imágenes (Bordes)

CSS y los textos (parte 2)

SUMARIO:

Las propiedades CSS (background)