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.
Propiedades Constitutivas
Esta es una propiedad abreviada para las siguientes propiedades CSS:
- border-color
- border-style
- border-width
Resumen
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
Ejemplos
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
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.