border-top

Resumen

La propiedad de CSS border-top es una abreviatura que establece los valores de border-top-color, border-top-style, y border-top-width. Estas propiedades las características del borde superior de un elemento.

Los tres valores de la abreviatura pueden ser especificados en cualquier orden, y uno o dos de ellos pueden ser omitidos.

Como con todas las propiedades abreviadas, border-top siempre establece los valores de todas las propiedades que sean posibles, aun si no están especificadas. Establece aquellas que no son especificadas a sus valores por defecto. Esto significa que:

  border-top: none thick green;

es lo mismo que

  border-top: thick green;

y el valor de border-top-style establecido antes de border-top es ignorado.

El no especificar la parte de border-style que está destinada a establecer el valor de border-top-style significa que se tomará el valor por defecto, lo que significa que el border-top-style será none.

También hay que tomar en cuenta que en el siguiente bloque de código se ignorará la primer asignación de border-top-style dado que al indicar border-top se establecerá implicitamente el valor de border-top-style a none

  border-top-style: dotted;
  border-top: thick green;
Valor inicialas each of the properties of the shorthand:
Applies toall elements. It also applies to ::first-letter.
Heredableno
Mediavisual
Valor calculadoas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values

Sintaxis

border-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;

Valores

<br-width> 
See border-top-width.
<br-style> 
See border-top-style.
<color> 
See border-top-color.

Sintaxis formal

<line-width> || <line-style> || <color>
where 
<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Ejemplos

element {
    border-top: 1px solid #000;
}

Especificaciones

Especificación Status Comentarios
CSS Backgrounds and Borders Module Level 3
La definición de 'border-top' en esta especificación.		 Candidate Recommendation

No hay cambios directos, aunque la modificación de valores para border-top-color sí aplican.
CSS Level 2 (Revision 1)
La definición de 'border-top' en esta especificación.		 Recommendation No hay cambios significativos
CSS Level 1
La definición de 'border-top' en esta especificación.		 Recommendation Definición inicial

Compatibilidad con navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico 1.0 1.0 (1.7 o anterior) 4 3.5 1.0 (85)
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico 1.0 1.0 (1.0) (Yes) (Yes) (Yes)