BORDER-STYLE sert à définir le style des bordures d'un élément, suivant les valeurs à choisir : none, dotted, dashed, solid, double, groove, ridge, inset, outset.
Elles permettent de définir les bordures d'une boîte (en trait plein, trait double, trait pointillé, etc.). La propriété "bordure-style", accepte l'une des valeurs suivantes :
none, dotted, dashed, solid, double, groove, ridge, inset, outset
La propriété "border-style" supporte une à quatre valeurs, lequelles sont appliquées sur les quatres côtés de la bordure de la même façon que pour la propriété "border-width" définie page précédente.
Les exemples, pour simplifier la mise en
page, sont définis directement à l'aide du code suivant : <h2
style = " border-width: 6px ; border-style: xxxx ; border-color: green
; " align="center">... texte ...</h2> avec au départ
une épaisseur de border-width: 6px ;
Type de bordure "dotted"
Type de bordure "dashed"
Type de bordure "solid"
Type de bordure "double"
A partir d'ici la valeur d'épaisseur passe de 6 à 20px (en rouge) <h2 style=" border-width: 20px ; border-style: xxxx ; border-color: green ; " >
Type de bordure "groove"
Type de bordure "ridge"
Type de bordure "inset"
Type de bordure "outset"
Dans le HEAD de cette page
.border1 { border-top-style: solid ; border-width: thin ; border-color:red ; }
.border2 {border-style: dotted solid dashed ; border-color:green ; }
.border3{ border-style: solid ; border-color: green ; }
.border4 { border-bottom-style: solid dotted dashed ; border-color: blue ; padding:15px ; }
Rappel : pour définir globalement les propriétés "border-top-width", "border-right-width", "border-bottom-width" et "border-left-width'" dans la feuille de style, Attention on doit une valeur de style devant. Ici pour l'exemple la valeur "solid" est de nouveau utilisée.
Règles de la propriété WIDTH
S'il n'y a qu'une valeur spécifiée, celle-ci s'applique à tous les côtés. S'il y en a deux, alors la première valeur s'applique pour la marge du haut et celle du bas, et la seconde pour la marge droite et celle de gauche. S'il y en a trois, la marge du haut reçoit la première valeur, les marges gauche et droite la deuxième et la marge du bas la troisième. S'il y en a quatre, celles-ci s'appliquent respectivement aux marges du haut, de droite, du bas et de gauche.
.border1 { border-top-style: solid ; border-width: thin ; border-color: red ; } c'est le modèle simple de base appliqué à ce paragraphe.
.border2 { border-bottom-style: solid ; border-color: blue ; padding:15px ; } et encore une fois je mefais plaisir avec un élément bien aéré avec l'aide de "padding:15px".
Déclaration raccourcie
La propriété raccourcie "border" sert à
spécifier de manière groupée les propriétés
"border-top", "border-right", "border-bottom"
et "border-left" d'une boîte c'est-à-dire une même
épaisseur, couleur et style pour les quatre
côtés à la fois et dans ce cas s'applique à
l'ensemble de la page. { border: green solid ; }
antes :
.border3 {border-style: dotted ; border-color: green ; }
.border4 {border-style: dotted solid dashed ; border-color: blue ; } cet exemple, avec toujours un espace entre les valeurs, ayant sa règle placée dans le HEAD il convient d'appeler la classe correspondante pour obtenir une bordure de boîte, en vert et des pointillés pour "top", des tirets pour "right" et "left" et enfin en continu pour "bottom".
border-top | border-top-color | border-top-style | border-top-width
border-right | border-right-color | border-right-style | border-right-width
border-bottom [ border-bottom-color | border-bottom-style | border-bottom-width
border-left | border-left-color | border-left-style | border-left-width
border-color
Sommaire CSS ... @ ... Suite avec la propriété PADDING
