Propriété CSS border-top
La propriété CSS border-top définit la largeur, la couleur et le style de ligne de la bordure supérieure des éléments. Il s'agit d'une propriété abrégée pour spécifier les valeurs de border-top-width, border-top-style et border-top-color.
Ces trois valeurs de la propriété abrégée peuvent être spécifiées dans n'importe quel ordre, et l'une ou deux d'entre elles peuvent être omises.
S'il n'y a pas de couleur spécifiée, la valeur sera prise de la propriété color. Si la propriété color n'est pas définie, la couleur noire sera utilisée par défaut.
Si la width n'est pas spécifiée, elle prendra la taille moyenne de l'élément.
| Valeur initiale | medium none currentColor |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter. |
| Héritée | Non |
| Animable | Oui. La couleur et la largeur de la bordure sont animables. |
| Version | CSS1 |
| Syntaxe DOM | object.style.borderTop = "1px solid black"; |
Syntaxe
Syntaxe de la propriété CSS border-top
border-top: border-width border-style border-color | initial | inherit;Exemple de la propriété border-top :
Exemple de la propriété CSS border-top avec une valeur solide
<!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>Résultat
Exemple de la propriété border-top appliquée à différents éléments :
Exemple de la propriété CSS border-top avec des valeurs en pointillés, solide et 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>Vous pouvez créer une boîte avec l'élément <div> et définir une background-color pour votre boîte ainsi que la bordure supérieure.
Exemple d'utilisation de la propriété border-top pour créer une boîte avec une bordure en relief :
Exemple de la propriété CSS border-top avec une valeur en relief (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>Valeurs
| Valeur | Description |
|---|---|
| border-top-width | Définit la largeur de la bordure supérieure d'un élément. La valeur par défaut est "medium". Valeur requise. |
| border-top-style | Définit le style de ligne de la bordure supérieure d'un élément. La valeur par défaut est "none". Valeur requise. |
| border-top-color | Définit la couleur de la bordure supérieure d'un élément. La valeur par défaut est la couleur actuelle du texte. |
| initial | Définit la propriété sur sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quelle est la syntaxe correcte pour définir la propriété CSS 'border-top' ?