1.4.2.- Bordes. | DIW04.- Hojas de estilos.

Un borde es una línea dibujada alrededor del área de contenido de un elemento y de su relleno (padding), aunque ya vimos que éste último era opcional.

Los bordes funcionan, a la hora de establecer su valores, de la misma manera que el relleno visto anteriormente, siguiendo un orden: superior, derecho, inferior, izquierdo, siempre en el sentido de las agujas del reloj y comenzando en las 12. Es fácil de recordar.

Se pueden establecer valores distintos para cada uno de los bordes y omitir valores, al igual que hacíamos con el relleno.

Ilustración que representa un rectángulo con su borde muy decorado. — steveczajka (CC BY)

Podemos configurar el estilo del borde, su grosor y su color. Las propiedades que nos permiten hacerlo son:

Border-style: con esta propiedad configuramos el estilo del borde. Esta propiedad es, sin duda, la más importante del borde, ya que, si no está presente el borde no existirá.
La propiedad border-style puede tener los valores: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset e inherit. En el siguiente ejemplo configuramos cada uno de los lados de la caja con un borde distinto.

Ejemplo:
```
div {border-style: solid dashed dotted double; } div {border-style: solid dashed dotted double; }
```
Border-width: con esta propiedad configuramos el grosor del borde.
Los valores que puede tomar esta propiedad son: thin, medium, thick, inherit o un valor concreto en píxeles. Si no se especifica esta propiedad tomará medium como valor por defecto. En el siguiente ejemplo configuramos un grosor distinto en cada uno de los lados del borde.

Ejemplo:
```
div {border-style: solid; border-width: thin medium thick 12px; }
```
Border-color: con esta propiedad configuramos el color del borde.
Si no especificamos el color el elemento coge el del "primer plano", es decir que si, por ejemplo, tenemos una caja en cuyo interior hay texto, el color del borde será el color del texto.

Existe el color transparent pero no está soportado por todos los navegadores. En el siguiente ejemplo especificamos un estilo y un ancho igual para todos los bordes y un color distinto para cada borde.

Ejemplo:
```
div {border-style: solid; border-width: 4px; border-color: #333 #red rgb(0,0,255) #0044AC; }
```

La propiedad border une todas las propiedades "border" vistas hasta ahora. En esta propiedad, a diferencia de las anteriores, no hay que colocar los valores en ningún orden concreto. La propiedad border se emplea cuando se quieren configurar los cuatro lados por igual.

También tenemos las propiedades: border-top, border-right, border-bottom y border-left.

Ejemplos:

h1 {border: .5em solid blue; }
h2 {border-left: solid blue .5em; }
h3 {border-right: solid .5em; }