border-top

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

Nota: 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:

css

border-top: none thick green;

es lo mismo que

css

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

css

border-top-style: dotted;
border-top: thick green;

Valor inicial	as each of the properties of the shorthand: `border-top-width`: `medium` `border-top-style`: `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`: the absolute length or `0` if `border-top-style` is `none` or `hidden` `border-top-style`: 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`: discrete `border-top-width`: a length

Sintaxis

css

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

border-top = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

Ejemplos

css

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

Especificaciones

Specification
CSS Backgrounds and Borders Module Level 3 # border-shorthands

Compatibilidad con navegadores

BCD tables only load in the browser