border
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 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
Loading…
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.