border-top

Resumen

La propiedad de CSS border-top es una abreviatura que establece los valores de border-top-color, border-top-style (en-US), y border-top-width (en-US). 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 (en-US) 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 (en-US) significa que se tomará el valor por defecto, lo que significa que el border-top-style (en-US) 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 (en-US) dado que al indicar border-top se establecerá implicitamente el valor de border-top-style (en-US) 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
Valor calculadoas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

Sintaxis

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

Valores

<br-width> 
See border-top-width (en-US).
<br-style> 
See border-top-style (en-US).
<color> 
See border-top-color.

Sintaxis formal

<line-width> || (en-US) <line-style> || (en-US) <color>

where
<line-width> = <length> | (en-US) thin | (en-US) medium | (en-US) thick
<line-style> = none | (en-US) hidden | (en-US) dotted | (en-US) dashed | (en-US) solid | (en-US) double | (en-US) groove | (en-US) ridge | (en-US) inset | (en-US) outset
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )

where
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <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! (en-US)
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)