Bordures

Publié le par Titia

Pour ajouter une bordure, c'est bien simple, il suffit d'utiliser l'attribut border. On précise l'épaisseur, le style et la couleur.
Par exemple, border:1px solid #000; permet d'avoir une bordure de 1px d'épais, noire, et continue.
Il existe différents type de bordure :
<div style="border: 1px solid #5675A4;">Ici, la bordure est continue. </div>
Ici, la bordure est continue.

<div style="border: 1px dotted #5675A4;">Ici, la bordure est en pointillés. </div>
Ici, la bordure est en pointillés.

<div style="border: 1px dashed #5675A4;">Ici, la bordure est en tirets. </div>
Ici, la bordure est en tirets.

<div style="border: 1px groove #5675A4;">Ici, la bordure est en 3D. </div>
Ici, la bordure est en 3D.

<div style="border: 3px double #5675A4;">Ici, la bordure est double . </div>
Ici, la bordure est double .

A noter, pour la bordure double, l'épaisseur correspond au total de l'épaisseur de chaque trait plus de l'espace entre les deux traits, sachant que chaque trait a la même épaisseur, qui est égale à l'espace entre les deux traits. Donc, pour une bordure 3px, chaque trait fait 1px, et ils sont séparés par un vide d'1px. Et pour une bordure de 21px d'épais, chaque trait fait 7px d'épais, et sont espacés par 7px de vide.

Pour changer l'épaisseur, on change donc la première donnée :
<div style="border: 5px solid #5675A4;">Ici, la bordure est épaisse de 5px. </div>
Ici, la bordure est épaisse de 5px.

Publié dans Aides diverses

Pour être informé des derniers articles, inscrivez vous :
Commenter cet article
M
Bonjour Titia,
Finalement, j'ai trouvé la solution, en effet, mais pas sans m'être arraché quelques cheveux ;)
Merci en tout cas d'avoir pris le temps de me lire ainsi que pour ta réponse :)
Bonne journée!
Répondre
T


Hé hé ! Ouais, quand on a des questions, faut pas être à la seconde. Faut patienter un petit peu pour avoir la réponse. Donc soit on patiente et on se ronge les ongles... Soit on cherche et on
s'arrache les cheveux. Dans l'un ou l'autre cas, on n'en ressort pas indemne :p


De rien pour la réponse. Je réponds en général à tous les commentaires :)



M
Chère Titia,
Merci pour cette mine d'informations qu'est ton blog! Comme tu as l'air de bien t'y connaître, je me tourne vers toi, car je suis en train de convertir le CSS de mon blog en version 2, et je rencontre un souci lié aux bordures des modules. J'ai tout essayé, rien n'y fait: comment faire pour ne pas faire apparaître de bordures autour des modules?
Un autre de mes soucis est sans doute également lié à cela: mon entête et mon bas de page affichent une couleur grise, alors que normalement il n'y a pas de "cassure" entre ceux-ci et le reste du blog (ils ont le même fond d'écran que le reste du blog). Aurais-tu une idée sur comment je pourrais remédier à cela?
Je te remercie par avance pour ton aide précieuse et te souhaite une agréable journée :)
Morrigann ;)
Répondre
T


Bon, apparemment, pour tes modules, il semblerait que tu ais trouvé la solution à ton problème puisqu'ils n'ont plus de bordures.


De même que pour tes soucis d'entête et de pied de page... je crois que j'arrive trop tard. Désolée :)



M
comment est ce que l'on change la hauteur des bordure ?? merci d'avance
Répondre
T
La "'hauteur" des bordures ? C'est-à-dire ? L'épaisseur ? Comme ça : border: solid 5px #F00;
M
Bonjour Titia !Tout d'abord bravo pour ton blog !Ce serait sympa si quelqu'un pouvait me dire à peu près quoi modifier dans ma feuille CSS pour supprimer ou modifier les pointillés laids entre chaque article sur mon blog http://micgrif.over-blog.frMerci d'avance
Répondre
T
Tu ajoutes ça quelque part dans ton css : .afterArticle {border:none;}Et voilà !
P
merci pour ton aide sur le forum...pierre
Répondre
T
Ben, de rien ;)Quand je peux aider, j'aide :)