border-style |
Style de la bordure |
|---|---|
| CSS1 |
Syntaxe
| border-style: dashed|dotted|double|groove|hidden|inherit|initial|inset|none|outset|ridge|solid; |
Paramètres
| Paramètre | Exemple | Description |
|---|---|---|
| none | Ceci est un texte d'exemple |
Ce paramètre permet d'indiquer qu'il n'y a pas de bordure. |
| dashed | Ceci est un texte d'exemple |
Ce paramètre permet d'indiquer que la bordure est de style de ligne pointillé. |
| dotted | Ceci est un texte d'exemple |
Ce paramètre permet d'indiquer que la bordure est de style de point pointillé. |
| double | Ceci est un texte d'exemple |
Ce paramètre permet d'indiquer une double bordure. |
| groove | Ceci est un texte d'exemple |
Ce paramètre permet d'indiquer que la bordure est de style ombré vers le bas. |
| hidden | Ce paramètre permet d'indiquer qu'il n'y a pas de bordure à l'exception de conflit avec des éléments d'un tableau. | |
| inherit | Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. | |
| initial | Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. | |
| inset | Ceci est un texte d'exemple |
Ce paramètre permet d'indiquer que la bordure est de style ombré intérieur. |
| outset | Ceci est un texte d'exemple |
Ce paramètre permet d'indiquer que la bordure est de style ombré extérieur. |
| ridge | Ceci est un texte d'exemple |
Ce paramètre permet d'indiquer que la bordure est de style ombré vers le haut. |
| solid | Ceci est un texte d'exemple |
Ce paramètre permet d'indiquer que la bordure est une seule et même couleur sans aucun motif (solide). |
Description
Cette propriété permet de définir le style de la bordure d'un élément.
Remarques
- Définition et rôle : La propriété border-style permet de spécifier le style des bordures de tous les côtés d'un élément (haut, droite, bas et gauche). Elle est essentielle pour personnaliser l'apparence des bordures, offrant des options comme solid, dotted, et dashed pour des effets visuels variés.
- Comportement par défaut : Par défaut, la valeur de border-style est none, ce qui signifie que les bordures ne sont pas affichées. Pour qu'une bordure soit visible, border-style doit être spécifiée avec un style valide, tel que solid.
- Interaction avec les autres propriétés de bordure : Lorsque border-style est définie, elle interagit avec d'autres propriétés de bordure comme border-width et border-color. Par exemple, une bordure solid avec une largeur de 2px et une couleur red produira une bordure rouge de 2 pixels de largeur.
- Utilisation avec des valeurs multiples : Vous pouvez spécifier plusieurs styles en une seule déclaration pour définir des bordures différentes pour chaque côté de l'élément. Par exemple, border-style: solid dotted dashed double; appliquera respectivement ces styles aux bordures supérieure, droite, inférieure et gauche.
- Compatibilité avec la propriété border-collapse (tables) : Dans les tables, border-style est utile pour définir l'apparence des bordures entre les cellules lorsque border-collapse est défini sur separate. Si border-collapse est défini sur collapse, la bordure des cellules est fusionnée et border-style peut ne pas avoir l'effet escompté.
- Prise en charge des valeurs spécifiques au relief : Les styles groove, ridge, inset, et outset créent des effets de relief, donnant l'impression que les bordures sont intégrées ou surélevées par rapport à l'élément. Ces effets dépendent de la couleur de la bordure et peuvent être influencés par l'ombre portée ou les couleurs d'arrière-plan.
- Compatibilité des navigateurs : La propriété border-style est largement prise en charge dans tous les navigateurs modernes (Google Chrome, Firefox, Edge, Safari), ainsi que dans des versions plus anciennes d'Internet Explorer (à partir de IE 5.5). Toutefois, certains styles comme groove ou ridge peuvent ne pas être rendus de manière identique dans tous les navigateurs Web.
Dernière mise à jour : Dimanche, le 20 décembre 2015