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.
page(Doc) not found /es/docs/Guía de referencia de CSS
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.