Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

border-top

Este articulo necesita una revisión editorial. Cómo puedes ayudar.

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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 describen el borde superior de elementos.

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 propedades 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 esta destinada a establecer el valor de border-top-style significa que se tomara el valor por default, 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:
Animatableas 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

<br-width> || <br-style> || <color>

where
<br-width> = <length> | thin | medium | thick
<br-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( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText

where
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

Ejemplos

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

Especificaciones

Especificación Status Comentarios
CSS Backgrounds and Borders Module Level 3
The definition of 'border-top' in that specification.
Candidate Recommendation

No hay cambios directos, aunque la modificación de valores para border-top-color sí aplican.

CSS Level 2 (Revision 1)
The definition of 'border-top' in that specification.
Recommendation No hay cambios significativos
CSS Level 1
The definition of 'border-top' in that specification.
Recommendation Definición inicial

Compatibilidad con navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico 1.0 1.0 (1.7 or earlier) 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)

Etiquetas y colaboradores del documento

 Colaboradores en esta página: mcclone2001
 Última actualización por: mcclone2001,