Team-Masters.com

Que du Gratuit pour Webmasters

Rechercher

144 visiteurs par heure!

CLIQUEZ ICI, C'EST COOL ET GRATUIT !

Gagnez du trafic et de l'argent

PHP Sources

ressources graphiques



Classement de sites - Inscrivez le vôtre!

Top Clicks liendur


CSS : Les bordures

On utilise en CSS principalement trois propriétés des bordures : l’épaisseur, le style et la couleur.

Pour le style, c’est à dire la façon dont la bordure est dessinée, on utilise la propriété "border-style". Cette propriété peut prendre plusieurs valeurs dont celles ci-dessous :

none: aucune bordure
dashed: en tirets

dashed

dotted: en pointillés
dotted

solid: un seul trait plein
solid

double: deux traits pleins
double

groove: bordure en creux
groove

ridge: bordure en saillie
ridge

inset: bordure en relief vers l'arrière
inset

ouset: en relief vers l'avant
outset

Pour l’épaisseur, on utilise la propriété border-width qui peut prendre des valeurs en pixels, mais que l’on peut aussi définir à l’aide de mots-clés comme :

thin: bordure mince

thin

medium: bordure moyenne 
medium

thick: bordure épaisse 
thick

La couleur des bordures est définie par la propriété border-color. Celle-ci peut prendre des valeurs de mots-clés (red, blue, black, orange...) ou des valeurs de couleurs hexadécimales #FF3300, #000000, etc....

table {border-color: red }
ou encore border-color: #FF0000

Regroupement des propriétés
On peut regrouper les propriétés épaisseur, style, et couleur d’une bordure en une seule commande. Elles doivent êtres définies dans l’ordre précité. Ces propriétés regroupées peuvent être alors définies pour chaque côté.
Exemple :

div {
border-top: 7 solid #FFCF00;
border-right: thin double #808080;
}

Maintenant que vous avez vu comment traiter les bordures, passons sans plus tarder au positionnement des boîtes.

28 décembre 2004

 

Dans la même rubrique

Mise en page : Le positionnement flottant avec les CSS
CSS : Une mise en page sur 2 colonnes avec la propriété float
Construire un menu avec les CSS
Le recouvrement de blocs
Positionner des blocs en absolu en CSS
Le positionnement relatif en CSS
Le positionnement des blocs en CSS : Le flux normal
Mise en page en CSS : les types de boîtes
Mise en page avec les CSS : Comprendre le modèle de boîte
Les pseudo-classes

>> Voir tous les articles