Bordes
CSS permite modificar el aspecto de cada uno de los cuatro bordes de la caja de un elemento. Para cada borde se puede establecer su anchura o grosor, su color y su estilo, por lo que en total CSS define 20 propiedades relacionadas con los bordes.
Ancho
La anchura de los bordes se indica mediante una medida (en cualquier unidad de medida absoluta o relativa) o mediante las palabras clave thin (borde delgado), medium (borde normal) y thick (borde ancho). La anchura de los bordes se controla con las cuatro propiedades siguientes: border-top-width, border-right-width, border-bottom-width, border-left-width
La unidad de medida más habitual para establecer el grosor de los bordes es el píxel, ya que es la que permite un control más preciso sobre el grosor. Las palabras clave apenas se utilizan, ya que el estándar CSS no indica explícitamente el grosor al que equivale cada palabra clave, por lo que pueden producirse diferencias visuales entre navegadores. Así por ejemplo, el grosor medium equivale a 4px en algunas versiones de Internet Explorer y a 3px en el resto de navegadores.
Las reglas CSS utilizadas se muestran a continuación:
div {
border-top-width: 10px;
border-right-width: 1em;
border-bottom-width: thick;
border-left-width: thin;
}
Color
El color de los bordes se controla con las cuatro propiedades siguientes:
border-top-color, border-right-color, border-bottom-color, border-left-color
Las reglas CSS necesarias para mostrar los colores anteriores son las siguientes:
div {
border-top-color: #CC0000;
border-right-color: blue;
border-bottom-color: #00FF00;
border-left-color: #CCC;
}
CSS incluye una propiedad "shorthand" llamada border-color para establecer de forma simultánea el color de todos los bordes de una caja.
Estilo
Por último, CSS permite establecer el estilo de cada uno de los bordes mediante las siguientes propiedades: border-top-style, border-right-style, border-bottom-style, border-left-style
Propiedad shorthand
Como sucede con los márgenes y los rellenos, CSS define una serie de propiedades de tipo "shorthand" que permiten establecer todos los atributos de los bordes de forma simultánea. CSS incluye una propiedad "shorthand" para cada uno de los cuatro bordes y una propiedad "shorthand" global.
border-top, border-right, border-bottom, border-left