-webkit-border-before
Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.
La propriété CSS -webkit-border-before est une propriété raccourcie qui permet de définir les propriétés de la bordure pour le début d'un élément dans l'axe de bloc (l'axe logique orthogonal à l'axe de lecture).
Constituent properties
Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :
Syntaxe
/* Valeurs décrivant une bordure */
-webkit-border-before: 1px;
-webkit-border-before: 2px dotted;
-webkit-border-before: medium dashed blue;
/* Valeurs globales */
-webkit-border-before: inherit;
-webkit-border-before: initial;
-webkit-border-before: revert;
-webkit-border-before: revert-layer;
-webkit-border-before: unset;
Valeurs
Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :
<border-width>-
Voir
border-width. <border-style>-
Voir
border-style. <color>-
Voir
color.
Définition formelle
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
|---|---|
| Applicabilité | tous les éléments |
| Héritée | oui |
| Pourcentages | pour chaque propriété individuelle de la propriété raccourcie :
|
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | discrète |
Syntaxe formelle
-webkit-border-before =
<'border-width'> ||
<'border-style'> ||
<color>
<border-width> =
<'border-top-width'>{1,4}
<border-style> =
<'border-top-style'>{1,4}
<border-top-width> =
<line-width>
<border-top-style> =
<line-style>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Exemples
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.texteExemple {
writing-mode: vertical-rl;
-webkit-border-before: 5px dashed blue;
}
HTML
<div>
<p class="texteExemple">Texte pour l'exemple</p>
</div>
Résultat
Spécifications
Cette propriété ne fait partie d'aucun standard, mais est lié à la propriété border-block-start en cours de standardisation.
Compatibilité des navigateurs
Loading…
Voir aussi
border-block-start-
Les propriétés physiques correspondantes :
-
Les propriétés qui déterminent les propriétés logiques par rapport aux propriétés physiques