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 inicial	as each of the properties of the shorthand: border-top-width (en-US): `medium` border-top-style (en-US): `none` `border-top-color`: `currentcolor`
Applies to	all elements. It also applies to `::first-letter`.
Heredable	no
Valor calculado	as each of the properties of the shorthand: border-top-width (en-US): the absolute length or `0` if border-top-style (en-US) is `none` or `hidden` border-top-style (en-US): como se especifica `border-top-color`: computed color
Animation type	as each of the properties of the shorthand: `border-top-color`: a color border-top-style (en-US): discrete border-top-width (en-US): a length

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) <hwb()> | (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) )
<hwb()> = hwb( [ (en-US)<hue> | (en-US) none] (en-US) [ (en-US)<percentage> | (en-US) none] (en-US) [ (en-US)<percentage> | (en-US) none] (en-US) [ (en-US) / [ (en-US)<alpha-value> | (en-US) none] (en-US) ] (en-US)? (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)

Escritorio
Móvil

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)