border

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/content/files/en-us/guía de referencia de css/index.md)

Propiedades Constitutivas

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

Sintaxis

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

Valores

border-width.

border-style.

border-color.

Ejemplos

Ver ejemplo en vivo

element {
    border: 1px solid #000;
}

Notas importantes

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.

Especificaciones

Specification
CSS Backgrounds and Borders Module Level 3 # propdef-border

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también

border, border-color, border-style, border-width

Descripción

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.

Bordes vs. contornos

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.