-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é raccourcie CSS -webkit-border-before 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).
Propriétés constitutives
Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :
-webkit-border-before-color-webkit-border-before-style-webkit-border-before-width
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
Appliquer une bordure avec du texte vertical
HTML
<div>
<p class="texteExemple">Texte pour l'exemple</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.texteExemple {
writing-mode: vertical-rl;
-webkit-border-before: 5px dashed blue;
}
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
Voir aussi
- La propriété
border-block-start - Les propriétés physiques correspondantes :
border-top,border-right,border-bottometborder-left - Les propriétés
writing-mode,direction,text-orientation