border-width
La propriété raccourcie BORDER permet de spécifier la valeur de la marge épaisseur, couleur et style pour les quatre côtés à la fois. Appelée aussi "marge externe" ou encore "bordure" , elle sert souvent à différencier des éléments, ainsi qu'à les faire ressortir en "bordant" la boîte et en choisissant ces bordures dans plusieurs modèles. Point n'en faut tout de même abuser ! sous peine de transformer votre page en échiquier d'échecs.
Mais il est également possible à partir de "border" et d'une manière différente, de définir séparément un bord, ou plusieurs avec les propriétés "border-top", "border-right", "border-bottom" et "border-left".
À la différence des propriétés de raccourcie "padding" et "margin", cette propriété "border" ne permet pas de donner des valeurs propres à chacune des quatre bordures. Pour cela il faut employer l'une ou plusieurs des propriétés individuelles de bordure.
Règles de base :
Ci-dessus schématisée en bleu clair, en CSS cette zone "border" va pouvoir s'adapter en largeur (épaisseur), type (style) et couleur. Il est possible aussi de définir et regrouper en une seule déclaration les différentes valeurs pour choisir l'épaisseur, le style et la couleur et bien d'autres possibilités qui vont être examinées.
On utilise les valeurs numériques ou le pourcentage, et
les couleurs habituelles. Les valeurs négatives ne sont pas tolérées.
Les règles d'hérédité ne sont pas applicables.
Mais il reste à analyser les différentes propriétés css permettant de rendre moins lugubres les bordures d'un élément :
- border-width permet de définir l'épaisseur des bordures
- border-color permet de définir la couleur des bordures
- border-style permet de définir le style des bordures
Une propriété peut contenir plusieurs valeurs qui peuvent être énoncées et regroupées à la suite, peu importe l'ordre, mais séparées par des espaces.
Certains navigateurs n'interprètent pas correctement les bordures si ces 3 propriétés ne sont pas renseignées et ne pas oublier que l'affichage peut sensiblement varier de l'un à l'autre. Si certains exemples ne vous paraissent pas concluants, n'insistez pas et grondez votre navigateur.
Valeurs acceptées
- mesures de longueur et pourcentage pour définir l'épaisseur.
- mots-clés none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset pour définir le style.
- code hexadécimal, rgb ou en anglais pour définir la couleur.
Les codes placés dans HEAD
.border { border: solid ; }
.borderleft { border-left: solid ; }
.border1 { border-bottom: solid ; }
.borderpadding {border: solid ; padding: 15px ;}
.bordertop { border-top: solid ; }
.borderright { border-right: solid ; }
.borderbottom { border-bottom: solid ; }
.borderleft { border-left: solid ; }
.borderplus {border-top: solid 3px ; border-right: solid 6px ; }
.borderwidth { border-style:solid ; border-left-width: 3mm ; }
h3 { border-style:solid ; border-width: 0px 10px 2px 0px ; }
.thin { border: solid thin ; }
.medium { border: solid medium ; }
.thick { border: solid thick ; }
BORDER de base
.border { border: solid ; } Voici une bordure qui entoure ce petit paragraphe. La propriété "border" autorise de multiples effets et son étude doit être abordée avec méthode. Voici en premier la déclaration la plus simple et un résultat obtenu avec la valeur "solid" qui correspond à un ligne continue, noire par défaut.
.borderpadding {border: solid ; padding: 15px ; } Mais comme dans la série suivante concernant la propriété PADDING vous allez retrouver cette possibilité de présenter un paragraphe plus aéré, pourquoi s'en priver. Notre boîte commence à prendre forme !
Définition générale de la largeur des bordures
Il existe trois valeurs définies par des mots-clés, qui sont :
- thin = bordure fine par rapport à "medium"
- medium = bordure moyenne
- thick = bordure épaisse par rapport à "medium"
Voici un exemple avec appel de la classe .thin { border: solid thin ; }
Voici un exemple avec appel de la classe .medium { border: solid medium ; }
Voici un exemple avec appel de la classe .thick { border: solid thick ; }
border-top, border-right, border-bottom, border-left
.bordertop {border-top: solid ; } Mais vous pouvez choisir le coté (ou les cotés) de bordure que vous souhaitez, et de ces exemples vont découler tout naturellement la suite des possibilités proposées avec BORDER. Ici cette bordure en haut avec "top", c'est du CSS ! <p class="bordertop">
.borderright { border-right: solid : } Un bref exemple pour placer une bordure uniquement sur le coté droit de la boîte. <p class="borderright">
.borderbottom { border-bottom: solid : } Encore un exemple pour placer une bordure uniquement sur le bas de l'élément.<p class="borderbottom">
.borderleft { border-left: solid : } Et enfin un exemple pour définir la bordure uniquement sur le coté gauche de l'élément. <p class="borderleft">
.borderplus {border-top: solid 3px ; border-right: solid 6px ; } voici un exemple avec deux valeurs différentes ce qui donne une bordure supérieure et un bordure à droite plus épaisses. Toutes les fantaisies sont permises en CSS.. ou presque..
NOTA : border-width
Permet de définir l'épaisseur des bordures d'un élément. L'épaisseur ne peut être appliquée que si le type de bordure (border-style) ou la couleur de bordure (border-color) a été défini, sans quoi la bordure n'apparaît pas. Certains navigateurs n'interprèteront dailleurs pas les bordures si ces deux propriétés ne sont pas renseignées.
Propriété WIDTH
Cette propriété raccourcie sert à 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 sur Internet Explorer on doit obligatoirement l'accompagner d'une valeur de style. Ici pour l'exemple "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.
Exemples
.borderwidth { border-style: solid ; border-left-width: 3mm ; } Un premier exemple de base avec WHITH qui définit un coté de bordure ou plusieurs au choix : .borderwidth { border-left-width: 2mm ; border-right-width: 20px ; border-style: solid ; } A noter que dans cet exemple les 3 autres bordures reçoivent une valeur par défaut.
h3 { border-style: solid ; border-width: 0px 10px 2px 0px ; } Pour aller plus loin que les REGLES énoncées ci-dessus, vous pouvez définir 4 valeurs, avec par exemple le "top" et le "left" à zéro, ou autres combinaisons. En y ajoutant plus tard un style et une couleur il deviendra agréable de cadrer un élément. Sans oublier un "padding" pour aérer l'ensemble.
h4 { border-style: solid ; border-width: 0px 10px 2px 0px ; padding: 15px ; } Avant de tourner la page pour passer au style des bordures , je n'ai pas résisté au plaisir d'un PADDING de 15px.
Récapitulatif des propriétés BORDER
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
