
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
yborder-top-color
. - La página de propiedades establecido por la propiedad de acceso directo
border
:border-width
,border-style
yborder-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
).
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS