border-top
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis â¨juillet 2015â©.
La propriété CSS border-top est une propriété raccourcie qui permet de paramétrer la bordure haute d'un élément.
C'est une propriété raccourcie qui permet de définir les valeurs de :
Exemple interactif
border-top: solid;
border-top: dashed red;
border-top: 1rem solid;
border-top: thick double #32a1ce;
border-top: 4mm ridge rgba(211, 220, 50, 0.6);
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: #eee;
color: #8b008b;
padding: 0.75em;
width: 80%;
height: 100px;
}
Note : Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.
Comme pour les autres propriétés raccourcies, border-top définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :
border-top-style: dotted;
border-top: thick green;
est équivalent à :
border-top-style: dotted;
border-top: none thick green;
et la valeur border-top-style fournie avant border-top est ignorée.
La valeur par défaut de border-top-style étant none, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à -dire qu'on aura aucune bordure.
Syntaxe
border-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;
Les valeurs de la propriété raccourcie peuvent être fournies dans n'importe quel ordre et une voire deux valeurs peuvent être omises.
Valeurs
<br-width>-
Voir
border-top-width. <br-style>-
Voir
border-top-style. <color>-
Voir
border-top-color.
Définition formelle
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
|---|---|
| Applicabilité | tous les éléments. S'applique aussi à ::first-letter. |
| Héritée | non |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
Syntaxe formelle
border-top =
<line-width> ||
<line-style> ||
<color>
<line-width> =
<length [0,â]> |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Exemples
CSS
.exemple {
border-top: 3px dotted orange;
}
HTML
<p class="exemple">
En passant elle prit sur un rayon un pot de confiture portant cette étiquette,
« MARMELADE DâORANGES. »
</p>
Résultat
Spécifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |