Exemple
Définir le style des quatre frontières:
p
{
border-style: solid;
}
Essayez - le vous - même » Plus "Try it Yourself" exemples ci - dessous.
Définition et utilisation
La propriété border-style définit le style des quatre bordures d'un élément. Cette propriété peut avoir un à quatre valeurs.
Exemples:
- border-style:dotted solid double dashed;
- bordure supérieure est parsemée
- bordure droite est solide
- bordure inférieure est le double
- bordure gauche est en pointillés
- border-style:dotted solid double;
- bordure supérieure est parsemée
- frontières droite et gauche sont solides
- bordure inférieure est le double
- border-style:dotted solid;
- bordures supérieure et inférieure sont en pointillé
- frontières droite et gauche sont solides
- border-style:dotted;
- les quatre frontières sont parsemées
| Valeur par défaut: | none |
|---|---|
| Hérité: | no |
| Animable: | no. Read about animatable |
| Version: | CSS1 |
| Syntaxe JavaScript: | object .style.borderStyle="dotted double" Try it |
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
| Propriété | |||||
|---|---|---|---|---|---|
| border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: La valeur "hidden" est pas pris en charge dans IE7 et plus tôt. IE8 nécessite un DOCTYPE!. IE9 et de soutien plus tard "hidden" .
Syntaxe CSS
border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;propriété valeurs
| Valeur | La description | Joue-le |
|---|---|---|
| none | Valeur par défaut. Indique pas de frontière | Joue-le " |
| hidden | La même chose que "none" , sauf dans la résolution des conflits de frontière pour les éléments de table | Joue-le " |
| dotted | Indique une bordure en pointillés | Joue-le " |
| dashed | Indique une bordure en pointillés | Joue-le " |
| solid | Indique une bordure solide | Joue-le " |
| double | Indique une double bordure | Joue-le " |
| groove | Indique une bordure rainurée 3D. L'effet dépend de la valeur border-color | Joue-le " |
| ridge | Indique une bordure striée 3D. L'effet dépend de la valeur border-color | Joue-le " |
| inset | Indique une bordure d'encart 3D. L'effet dépend de la valeur border-color | Joue-le " |
| outset | Indique une frontière de départ 3D. L'effet dépend de la valeur border-color | Joue-le " |
| initial | Définit cette propriété à sa valeur par défaut. Lisez à propos initial | Joue-le " |
| inherit | Hérite cette propriété de son élément parent. Lisez à propos de hériteront |
Autres exemples
Exemple
Définir des frontières différentes de chaque côté d'un élément:
p.one {border-style: dotted solid dashed double;}
p.two {border-style:
dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four
{border-style: dotted;} Essayez - le vous - même » Pages associées
Tutoriel CSS: CSS Border
Référence HTML DOM: borderStyle property