border
Raccourci qui définit l’épaisseur, le style et la couleur d’une bordure.
- Valeur initiale
medium none currentcolor- Héritée
- Non
- Animable
- oui, l’épaisseur et la couleur
- S’applique à
- tous les éléments
- JavaScript
element.style.border = "2px solid #a78bfa"
Exemple
#.input {
border: 1px solid #525252;
border-radius: 8px;
}
.input:focus {
border-color: #a78bfa;
}<input class="input" placeholder="Cliquez pour changer la couleur de la bordure" style="padding: 8px 12px; width: 100%; outline: none; background: #111;">Définition et utilisation
#La propriété border combine trois propriétés : border-width, border-style et border-color. Vous pouvez indiquer les valeurs dans n’importe quel ordre, par exemple border: 2px solid #a78bfa.
Le style est le plus important. Sans lui, aucune bordure n’apparaît, car le style par défaut est none. Si vous omettez la couleur, la bordure prend la couleur du texte (currentcolor).
Le raccourci définit les quatre côtés à la fois. Pour un seul côté, utilisez border-top, border-right, border-bottom et border-left, utiles par exemple pour des soulignements ou des séparateurs.
Syntaxe
#border: <épaisseur> || <style> || <couleur>;Valeurs
#- Une ligne fine, continue et grise. Le choix le plus courant pour les cartes et les champs.
- Une ligne en tirets plus épaisse.
- Une ligne double. Elle doit mesurer au moins 3px d’épaisseur pour être visible.
- Aucune bordure.
Valeurs en pratique
#1px solid #525252
.demo { border: 1px solid #525252; }3px dashed #f59e0b
.demo { border: 3px dashed #f59e0b; }6px double #a78bfa
.demo { border: 6px double #a78bfa; }none
.demo { border: 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 modifie la taille de l’élément. Si elle n’apparaît qu’au survol et provoque un saut de mise en page, fixez une bordure constante de couleur
transparent. - Pour une bordure qui n’affecte pas la mise en page, utilisez
outlineoubox-shadow.
Entrées associées
#- border vs outlineborder fait partie du modèle de boîte et agrandit l’élément, alors que outline dessine un contour à l’extérieur, sans effet sur la mise en page ni la taille.
- border-widthDéfinit l’épaisseur d’une bordure.
- border-styleDéfinit le style de la ligne de bordure : continue, en tirets, en pointillés, et plus encore.
- border-colorDéfinit la couleur d’une bordure.
- border-radiusArrondit les coins d’un élément.
- outlineDessine un contour autour d’un élément, sans qu’il occupe de place dans la mise en page.
- border-imageRemplace une bordure classique par une image ou un dégradé découpé en coins et en bords.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.