border-style
Définit le style de la ligne de bordure : continue, en tirets, en pointillés, et plus encore.
- Valeur initiale
none- Héritée
- Non
- Animable
- non
- S’applique à
- tous les éléments
- JavaScript
element.style.borderStyle = "dashed"
Exemple
#.dropzone {
border: 2px dashed #525252;
border-radius: 12px;
}<div class="dropzone" style="padding: 24px; text-align: center; color: #a3a3a3;">Déposez ici le fichier de votre projet</div>Définition et utilisation
#La propriété border-style choisit l’apparence de la ligne de bordure. Sans elle, aucune bordure n’existe, car la valeur par défaut est none.
Vous disposez de lignes continues (solid), en tirets (dashed), en pointillés (dotted) et doubles (double), ainsi que des styles en trois dimensions groove, ridge, inset et outset, aujourd’hui rarement utilisés.
Le style peut être défini séparément pour chaque côté, en indiquant de une à quatre valeurs.
Syntaxe
#border-style: none | hidden | solid | dashed | dotted | double | groove | ridge | inset | outset;Valeurs
#Valeurs en pratique
#solid
.demo { border-style: solid; }dashed
.demo { border-style: dashed; }dotted
.demo { border-style: dotted; }double
.demo { border-style: double; }groove
.demo { border-style: groove; }none
.demo { border-style: none; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Une bordure en tirets est un signal clair pour une zone de dépôt de fichiers ou un emplacement de contenu vide.
- Les styles
groove,ridge,insetetoutsetdépendent de la couleur et paraissent souvent démodés. Pour un effet de profondeur,box-shadowest préférable.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.