Características border-top en CSS

Una propiedad border-top en CSS es una propiedad abreviada que establece los valores de los atributos border-top-color, border-top-style y border-top-width. Estos atributos describen cómo se muestra el marco superior del elemento.

Funciones border-top css

Valor inicial	Para cada valor corto: `border-top-width`: `medium` `border-top-style`: `none` `border-top-color`: `currentcolor`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	Sí
Valor calculado	Para cada valor corto: `border-top-width`: longitud absoluta, o 0 si la propiedad se establece `border-top-style`: en `none` o `hidden`. `border-top-style`: como se especificó. `border-top-color`: color calculado.

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

Al igual que con todas las propiedades de acceso directo, la propiedad border-top establece los valores de todas las propiedades que puede establecer, incluso si no especificamos un valor para esas propiedades, porque las establecerá en sus valores iniciales, lo que significa que el código:

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

Eventualmente se verá así:

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

Tenga en cuenta que el valor de propiedad border-top-style especificado antes de la propiedad border-top se ignorará. Debido a que el valor inicial de la propiedad border-top-style es none, las reglas anteriores no darán como resultado que se muestre un super cuadro.

Ejemplos y aplicaciones en código

En el siguiente ejemplo, estableceremos un marco superior para los elementos que son azul <div>( 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 </ div >

Código CSS:

div {
  border-top: 5px dotted blue;
  padding: 0.5em;
}

Soporte de navegadores

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

Características generales

Esta propiedad acorta tres propiedades, cuyos valores se pueden especificar en cualquier orden, y se pueden omitir uno o dos de esos valores.

<br-width>

Vea la página de características border-top-width.

<br-style>

Consulte la página de características border-top-style.

<color>

Vea la página de características border-top-color.

Estructura border-top css

border-top: <br-width> || <br-style> || <color>;

Los valores se pueden colocar en el orden que desee.

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

Consulte también

La página de propiedades establecido por la propiedad de acceso directo border-top: border-top-width, border-top-style y border-top-color.
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 border-top-right-radius).