Bordures et style

Les styles de bordure

On utilise la propriété border-style pour définir le style de bordure. Il y a différentes valeurs possibles :

• none : pas de bordure
• solid : un trait simple
• dotted : pointillés
• dashed : tirets
• double : bordure double
• groove : en relief
• ridge : effet 3D
• inset : Effet 3D mais le block est vu comme un creux
• outset : Effet 3D mais le block a l'air d'être surélevé)

La plus simple et la plus courante des bordures est de style solid. C'est juste pour mettre un trait simple.

Code CSS :

.borduresimple {


border-style : solid ;


}

Code XHTML :

<p class=" borduresimple ">
J'aime le css et le XHTML. C'est vraiment génial de pouvoir modifier le design du site comme on veut.
</p>

Après vous avez le choix. Une bordure avec des pointillés par exemple peut vous être utile.

Code CSS :

.pointille {


border-style : solid ;


}

Code XHTML :

<p class=" pointille">
J'aime le CSS et le XHTML. C'est vraiment génial de pouvoir modifier le design du site comme on veut.
</p>

Couleur de bordure

On a vu plus haut des bordures en noir, couleur par défaut. En donnant une valeur à la propriété border-color, on peut avoir d'autres couleurs. Après, il suffit de spécifier une couleur soit par son mot clé ("green", "red"...) , soit par sa valeur hexadécimale (#FF0000), soit par une valeur rgb (rgb(0, 21, 7), comme l'on a vu dans les autres tutoriels. Pour colorer la bordure en vert par exemple, on met comme mot clé ‘green'.

Code CSS :

.couleur {


border-style : solid;
border-color : green;


}

Code XHTML :

<p class=" couleur">
Voici un paragraphe encadré en vert.
</p>

Epaisseur de la bordure

Vous avez aussi la possibilité de spécifier l'épaisseur de la bordure. Si vous désirez avoir une bordure plus épaisse ( 20px par exemple ) ou plus fine ( 2px par exemple ), l'exemple suivant vous montrera comment faire.

Code CSS :

.fine {


border-width : 1px;
border-color : green;
border-style : solid;


}



.epais{


border-width : 20px;
border-color : green;
border-style : solid;


}

Code XHTML :

<p class=" fine">
Voici un paragraphe avec une bordure fine.
</p>
<p class=" epais">
Voici un paragraphe avec une bordure épaisse.
</p>

Si vous ne voulez pas vous casser la tête avec les chiffres, pour avez la possibilité de mettre juste des mots-clés comme valeurs :

• thin : pour avoir une bordure fine
• medium : pour avoir une bordure moyenne
• thick : pour avoir une bordure épaisse

Bordure juste sur les 2 côtés

D'habitude quand on met une bordure, c'est pour avoir un cadre de 4 côtés. Mais le contexte des bordures ne se limite pas à cela. On peut avoir un autre style en mettant juste sur 2 côtés par exemple. Pour mettre une bordure en haut, utilisez border-top, alors que pour le bas, utilisez border-bottom. En suivant la logique border-left, c'est pour les bordures de gauche et border-right pour celle de la droite.

Code CSS :

.hautbas
{


border-top:1px solid #FF9900 ;
border-bottom:1px solid #00CC00 ;


}



.gauche
{


border-left:5px double #333333 ;


}



.droitegauche
{


border-right:4px groove #006699 ;
border-left:4px groove #FF0000;


}

Code XHTML :

<p class="hautbas">
J'aime le CSS et le XHTML. C'est vraiment génial de pouvoir modifier le design du site comme on veut.<br />
Voici un paragraphe avec une bordure orange en haut et verte en bas.
</p>
<p class="gauche">
J'aime le CSS et le XHTML. C'est vraiment génial de pouvoir modifier le design du site comme on veut. <br />
Voici un paragraphe avec une bordure grise à gauche.
</p>
<p class="droitegauche">
J'aime le CSS et le XHTML. C'est vraiment génial de pouvoir modifier le design du site comme on veut. <br />
Voici un paragraphe avec une bordure rouge à droite et bleue à gauche.
</p>

Toutes ces propriétés fonctionnent comme border mais la seule différence c'est que chacune d'elles ne s'applique qu'à un seul côté.

Enlever la bordure

La valeur par défaut de la propriété border-style est none. Donc si vous omettez cette propriété dans la définition du style, vous ne verrez pas une bordure.

A l'inverse, cette valeur peut être très utile dans certains cas. Quand on a parlé des liens en XHTML, on a vu que lorsqu'une image est transformée en lien, elle sera encadrée automatiquement par une bordure bleue. En mettant la valeur none pour la propriété border de toutes les images cliquables, on peut enlever cette bordure bleue.

Code CSS :

/* Enlever les bordures de toutes les images cliquables */
a img
{


border: none;


}

Code XHTML :

<p>


<a href="#"><img src="bordure.jpg" alt="suivant" title="Cliquer ici" /></a>


</p>