Propiedad border en CSS, (Introducción a CSS)

Propiedad border

La propiedad border establece algunas o todas las propiedades de todos los bordes de los elementos.

La propiedad border presenta los siguientes valores en cualquier orden: ancho, estilo del borde, color del borde

Propiedad border, ejemplo de uso

La propiedad border es una de las “propiedades shorthand” que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales. En este caso, se trata de una de las propiedades shorthand más completas, ya que permite establecer hasta 12 propiedades de forma simultánea.

La propiedad border se utiliza para establecer el mismo grosor, estilo y/o anchura de todos los bordes de un elemento. Al contrario que las propiedades margin y padding, con la propiedad border no es posible indicar diferentes valores para cada uno de los cuatro bordes.

Como se trata de una de las propiedades más flexibles de CSS, su definición parece complicada, sobre todo en lo que se refiere a los valores permitidos “alguno o todos los siguientes valores y en cualquier orden”).

El uso más habitual de border es el de establecer simultáneamente el grosor, estilo y color del borde de un elemento:

div { border: 1px solid #C00; }

En el siguiente ejemplo, se muestran tres formas diferentes de establecer el mismo borde a un elemento:

 
 
/* Utilizando la propiedad shorthand "border" */
div {
  border: 1px solid #C00;
}
 
/* Utilizando las propiedades shorthand de cada borde */
div {
  border-top: 1px solid #C00;
  border-right: 1px solid #C00;
  border-bottom: 1px solid #C00;
  border-left: 1px solid #C00;
}
 
/* Utilizando las propiedades simples de cada borde */
div {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #C00;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #C00;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #C00;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #C00;
}

En el mejor de los casos, la propiedad border es equivalente a 12 propiedades simples. Además, como sucede con todas las propiedades de tipo shorthand relacionadas con los bordes, el orden en el que se indican los valores es indiferente:

div { border: 1px solid #C00; }
div { border: solid 1px #C00; }
div { border: #C00 1px solid; }
div { border: #C00 solid 1px; }

La propiedad border no requiere que se indiquen las tres propiedades que definen el estilo de los bordes. Si no se indica alguna propiedad, su valor se obtiene mediante el valor por defecto de esa propiedad.

En el siguiente ejemplo sólo se indica el estilo del borde, por lo que el navegador asigna automáticamente el valor medium a su grosor y el valor black a su color:

div { border: solid; }

En el siguiente ejemplo se omite el grosor del borde, por lo que el navegador le asigna automáticamente el valor medium:

div { border: solid blue; }

No obstante, como el valor por defecto del estilo de un borde es none, si no se indica explícitamente el estilo del borde, el resultado es que el navegador no muestra ese borde:

div { border: 2px blue; }

La propiedad border es mucho más utilizada que las propiedades individuales de cada borde, ya que permite definir el aspecto del borde de un elemento de forma fácil y concisa.

El único inconveniente de esta propiedad es que asigna los mismos valores a los cuatro bordes de un elemento, por lo que parece que si uno de ellos no es idéntico a los demás, no se puede utilizar la propiedad border. No obstante, aprovechando el comportamiento de CSS, también se puede utilizar la propiedad border cuando alguno de los bordes es diferente.

En el siguiente ejemplo, tres de los bordes son idénticos (1px solid blue) pero el elemento no debe mostrar un borde inferior. La forma más rápida de conseguirlo es utilizar dos de las propiedades shorthand de los bordes:

div { border: 1px solid blue; border-bottom: none; }

De la misma forma, es posible asignar el mismo aspecto a los cuatro bordes y después utilizar alguna propiedad simple para cambiar algún grosor, estilo o color de algún borde:

 
div { border: 1px solid blue; border-bottom-color: red; }
div { border: 3px red; border-style: solid double; }
div { border: double; border-color: red blue green black; }

Propiedad border referencia css 2.1

Suscribir
Notificar a
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios