Grosor, Color y Estilo de Borde

Seguro que lo habéis acertado ya. Se trata de definir el grosor que queremos que tenga el borde de una imagen o de una celda, o incluso de un párrafo, en cuyo caso saldrá recuadrado. (algunos Navegadores como el Netscape 4.08 no representan los bordes en CSS, o al menos, yo no lo he conseguido. En Internet Explorer si que funciona).

1.- El atributo para definir el grosor de borde de un elemento es border-width y utiliza unidades como las ya comentadas, aunque suele emplearse el pixel (px). Este atributo define el ancho de los cuatro lados que rodean el elemento en cuestión, pero si queremos definir distintos bordes para cada uno de los lados podemos usar los atributos:

  • border-top-width: que define el grosor del borde de arriba.
  • border-bottom-width: para el grosor del borde de abajo
  • border-left-width: para el izquierdo y...
  • border-right-width: para el derecho.
  • Recordad que border-width se usa para poner el mismo grosor a los cuatro costados.

Si queremos que uno de ellos no se vea simplemente le ponemos un grosor nulo, es decir, cero, "0" patatero. Veamos un ejemplo. Si quiero que las celdas de todas las tablas de mi web aparezcan con bordes superior e inferior de 10 pixeles de grosor y de 20 por los lados, con un color de fondo negro y color de texto blanco, tendrás que redefinir (pues al ser un selector predeterminado ya estaba definido por defecto, aunque con otros valores) la Regla CSS siguiente para el selector celda "td":

td {border-top-width:10px ; border-bottom-width:10px ; border-left-width:20px ;
border-right-width:20px ; background-color:black ; color:white ; }

2.- También podemos definir el color de ese borde mediante el atributo border-color cuyos valores son los mostrados antes para estos.

3.- En cuanto al estilo del borde, se define mediante el atributo border-style y puede tomar los siguientes valores: solid, inset, groove, outset y double. Los efectos de cada uno de ellos lo podréis ver vosotros mismos aplicando la regla correspondiente.

Resumiendo: Un ejemplo que agrupa algunas propiedades vistas hasta ahora podría ser el de un párrafo de texto rojo, con un recuadro azul rodeándolo de tamaño 10px y con apariencia de doble línea. La Regla CSS correspondiente sería la siguiente:

p { text-color:red ; border-color:blue ; border-width:10px ; border-style:double ; }

(ese estilo de double no lo reconocen todos los navegadoes, mejor no lo uses.)

Hay un montón de Propiedades más, pero estas son las más usuales. Espero ir incluyendo más conforme las vaya dominando.