border

Esta es una propiedad abreviada para las siguientes propiedades CSS:

• border-color
• border-style
• border-width

La propiedad border permite definir en una única regla todos los bordes de los elementos seleccionados. Se puede utilizar border para definir el o los valores siguientes: border-width, border-style, border-color.

• Valor inicial: ver propiedades individuales
• Se aplica a: todos los elementos
• Herencia: no
• Porcentajes: N/A
• Medio: visual
• Valor calculada: ver propiedades individuales

border: [border-width || border-style || border-color | inherit] ;

border-width.

border-style.

border-color.

Ver ejemplo en vivo

element {
    border: 1px solid #000;
}

Mientras que las propiedades border-width, border-style y border-color admiten hasta cuatro valores diferentes, ésta (border) no acepta más de uno por cada propiedad.

Como sucede con todas las propiedades abreviadas, cualquier subvalor omitdo será definido a su valor inicial. Cabe destacar que la asignación de un valor personalizado a border-image no puede ser realizada mediante el uso de border, en todo caso éste útltimo lo fijaría a su valor inicial, por ejemplo, a none.

La propiedad abreviada border es especialmente útil cuando deseas que los cuatro bordes sean idénticos. Sin embargo, es posible hacerlos distintos utilzando las propiedades extensas (aquellas individuales que componen a la abreviada) border-width, border-style y border-color puesto que aceptan valores distintos por lado. Alternativamente, puedes modificar un borde a la vez con las propiedades físicas (p. ej. border-top) y lógicas (p. ej. border-block-start) del borde.

Los bordes y los contornos son muy parecidos. Sin embargo, los contornos se distinguen de los bordes de la siguiente forma:

• Los contornos nunca toman espacio, ya que se dibujan fuera del contenido de un elemento.
• De conformidad con las especificaciones, si bien los contornos suelen ser rectangulares, no necesitan serlo.