Características border-top-width en CSS

La propiedad border-top-width CSS establece el ancho del marco superior del elemento.

Funciones border-top-width css

Valor inicial	`medium`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	Sí
Valor calculado	Longitud absoluta, o 0 si la propiedad se establece `border-top-style` en `none` o `hidden`.

/* palabras clave */ 
border-top-width: thin;
border-top-width: medium;
border-top-width: thick;
/*  longitudes */ 
border-top-width: 10em;
border-top-width: 3vmax;
border-top-width: 6px;
/* valores globales */ 
border-top-width: inherit;
border-top-width: initial;
border-top-width: unset;

Ejemplos y aplicaciones en código

En el siguiente ejemplo, estableceremos un marco superior para los elementos que son azul

( border-top-color), su ancho ( border-top-width) es igual 5px y su forma ( border-top-style) tiene puntos.

Código HTML:

< div > Este elemento tiene un marco en su borde superior

Código CSS:

div {
  border-top-style: dotted;
  border-top-width: 5px;
  border-top-color: blue;
  padding: 0.6em;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	4.0	3,5	1.0

Características generales

Este valor define el ancho del marco, ya sea una longitud no negativa o una palabra reservada. Se pueden utilizar las siguientes palabras reservadas:

`thin`	marco delgado
`medium`	marco mediano
`thick`	marco grueso

Nota: Debido a que la especificación no especifica cuál es el valor exacto asociado con cada palabra reservada, el resultado puede variar según el navegador, pero no obstante, estos valores seguirán la relación thin ≤ medium ≤ thick y los valores serán consistentes entre sí en el documento.

Estructura border-top-width css

border-top-width: ;

dónde:

 =  | thin | medium | thick

Consulte también

La página de propiedades establecida por la propiedad de acceso directo border-top: border-top-color y border-top-style.
La página de propiedades establecido por la propiedad de acceso directo border: border-width, border-style y border-color.
Configure una imagen para el marco usando la función border-image.
Esquinas redondeadas y border-radius esquinas superiores (border-top-left-radius y border-top-right-radius)