Propiedad border-top de CSS
La propiedad border-top de CSS establece el ancho, el color y el estilo de línea del borde superior de los elementos. Es una propiedad abreviada para especificar los valores de border-top-width, border-top-style y border-top-color.
Estos tres valores de la propiedad abreviada pueden especificarse en cualquier orden, y se pueden omitir uno o dos de ellos.
Si no se especifica un color, el valor se tomará de la propiedad color. Si la propiedad color no está definida, tomará el color negro por defecto.
Si no se especifica el width, tomará el tamaño medio del elemento.
| Valor inicial | medium none currentColor |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredable | No |
| Animable | Sí. El color y el ancho del borde son animables. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.borderTop = "1px solid black"; |
Sintaxis
Sintaxis de la propiedad border-top de CSS
border-top: border-width border-style border-color | initial | inherit;Ejemplo de la propiedad border-top:
Ejemplo de la propiedad CSS border-top con valor solid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border-top: 3px solid #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Border-top example</h2>
<div> This is a simple example for the border-top property.</div>
</body>
</html>Resultado
Ejemplo de la propiedad border-top aplicada a diferentes elementos:
Ejemplo de la propiedad CSS border-top con valores dotted, solid y double
<!DOCTYPE html>
<html>
<head>
<style>
h1,
p,
div {
padding: 10px;
}
h1 {
border-top: 5px solid #8ebf42;
}
p {
border-top: 4px dotted #1c87c9;
}
div {
border-top: thick double #666;
}
</style>
</head>
<body>
<h1>A heading with a solid green top border</h1>
<p>A heading with a dotted blue top border.</p>
<div>A div element with a thick double top border.</div>
</body>
</html>Puedes crear una caja con el <div> y establecer un background-color para tu caja y definir el borde superior.
Ejemplo de uso de la propiedad border-top para crear una caja con un borde ridge:
Ejemplo de la propiedad CSS border-top con valor ridge
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-top: 20px ridge #8ebf42;
background-color: #ccc;
height: 100px;
width: 200px;
font-weight: bold;
text-align: center;
padding: 3px;
}
</style>
</head>
<body>
<div>
<p>This box has a ridge border on the top.</p>
</div>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| border-top-width | Establece el ancho del borde superior de un elemento. El valor predeterminado es "medium". Valor obligatorio. |
| border-top-style | Establece el estilo de línea del borde superior de un elemento. El valor predeterminado es "none". Valor obligatorio. |
| border-top-color | Establece el color del borde superior de un elemento. El valor predeterminado es el color actual del texto. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuál es la sintaxis correcta para establecer la propiedad CSS 'border-top'?