On peut utiliser des bordures pour beaucoup de choses, par exemple comme element decoratif ou pour souligner la separation de deux choses. CSS offre des options a n'en plus finir pour l'utilisation des bordures dans vos pages.

L'epaisseur des bordures [border-width]

L'epaisseur des bordures est definie par la propriete border-width, dont les valeurs peuvent etre "thin", "medium" et "thick", ou une valeur numerique en pixels. La figure ci-dessous illustre le systeme :

La couleur des bordures [border-color]

La propriete border-color definit la couleur d'une bordure. Des valeurs de couleur normales sont, par exemple, "#123456", "rgb(123,123,123)" ou "yellow" .

Les types de bordures [border-style]

On peut choisir parmi plusieurs types de bordures. Voici huit types de bordures differentes tels qu'Internet Explorer 5.5 les interprete. Toutes les bordures ont la couleur "gold" et une epaisseur valant "thick" mais elles peuvent naturellement s'afficher dans d'autres couleurs et epaisseurs.

Exemples de definitions de bordures

Les trois proprietes decrites precedemment peuvent etre reunies pour chaque element et donc produire des bordures differentes. Pour illustrer cela, voyons un document ou nous definissons des bordures differentes pour <h1>, <h2>, <ul> et <p>. Le resultant n'est peut-etre pas tres beau mais il montre quelques unes des nombreuses possibilites :


h1 {
	border-width: thick;
	border-style: dotted;
	border-color: gold;
}

h2 {
	border-width: 20px;
	border-style: outset;
	border-color: red;
}

p {
	border-width: 1px;
	border-style: dashed;
	border-color: blue;
}

ul {
	border-width: thin;
	border-style: solid;
	border-color: orange;
}

Il est egalement possible de declarer des proprietes speciales pour les bordures superieures, inferieures, gauches ou droites. L'exemle suivant montre comment le faire :


h1 {
	border-top-width: thick;
	border-top-style: solid;
	border-top-color: red;

	border-bottom-width: thick;
	border-bottom-style: solid;
	border-bottom-color: blue;

	border-right-width: thick;
	border-right-style: solid;
	border-right-color: green;

	border-left-width: thick;
	border-left-style: solid;
	border-left-color: orange;
}

Concision [border]

Comme pour beaucoup d'autres proprietes, on peut concentrer plusieurs proprietes en une seule avec border. Voici un exemple :


p {
	border-width: 1px;
	border-style: solid;
	border-color: blue;
}


p {
	border: 1px solid blue;
}

Resume

Dans cette lecon, vous avez eu un appercu des options illimitees offertes par CSS pour les bordures de vos pages.