Como colocar bordes a la plantilla de nuestra página web

Tal y como tenemos la plantilla, queda un poco cutre, así que vamos a ponerle unos bordes a los lados para mejorar su aspecto.

Con los bordes hay que tener mucho cuidado, pues cada navegador interpreta los bordes de un modo distinto y podría estropearnos el aspecto de nuestra página. Imagina un rectángulo. Si le definimos un borde de 10 pixeles de anchura, unos navegadores pintan ese borde por fuera de ese rectángulo, mientras que otros lo pintan por dentro del rectángulo. Al final resulta que los visitantes que vean la web con un tipo de navegador la veran bien, pero otros que usen otros navegadores no la verán como nosotros queremos. La forma que aquí proponemos es sencilla y procura que la página web se vea idéntica usando cualquier navegador.

Dónde se define un borde

Si aún te acuerdas de lo explicado al principio de las lecciones (esperemos que sí...) nos propusimos definir los contenidos en el código html de las páginas dejando la definición del aspecto en la Hoja de Estilo. Como los bordes son más aspectos decorativos que contenidos en sí, vamos a definirlos en la Hoja de Estilo. Así además podremos cambiarlo cuando nos de la gana con solo variar algunos detalles del archivo de estilo en lugar de tener que hacerlo en cada una de las páginas de la web.

Cómo se definen los bordes

En la Hoja de Estilos, se define el borde de un elemento (por ejemplo de una capa o div) escribiendo esto entre sus corchetes:

border:1px solid black;

donde 1px es la anchura del borde, solid significa que será una línea continua y black (negro) será el color que queremos que tenga la línea de borde. Hay otras formas de definir el borde, pero para el ejemplo nos basta con saber esto. Cuando quieras aprender más cosas sobre el Border solo tienes que visitar la sección Curso de Estilos CSS de ComoCrearTuWeb.

La línea anterior crea por tanto un borde de 1 pixel de ancho, con una línea continua de color negro por arriba, abajo y por los lados del elemento al que se lo apliquemos. Pero en ocasiones quizas prefiramos dibujar el borde solo por uno de los lados dejando sin borde los otros. Cómo podríamos hacer esto?

Dibujar el borde solo por algunos lados

Para dibujar el borde solo por un lado, se pone esta línea en lugar de la anterior:

border-top: black 1px solid (dibuja el borde solo por arriba)
border-bottom: black 1px solid (dibuja el borde solo por abajo)
border-left: black 1px solid (dibuja el borde solo por la izquierda)
border-right: black 1px solid(dibuja el borde solo por derecha)

Si queremos dibujar el borde por varios lados pero no por los cuatro, basta con escribir (entre los corchetes del elemento al que se lo queremos aplicar) las líneas anteriores que queramos, separadas por punto y coma ";".