Bordures, couleurs, tailles, style

Tutoriel : border color style width |

Les bordures en CSS

Introduction

Vous pouvez définir la couleur de vos tableaux en css, la taille dans votre code CSS.

border-color: Couleur de la bordure
border-style: Apparence de la bordure
border-width: Taille de la bordure

Héritage Il n'y pas de notion d'héritage pour les marges (voir notion d'héritage sur ce lien)

Couleur de la bordure

Vous pouvez définir la couleur de la bordure dans un tableau par exemple :

border-color: valeur;

Valeurs possibles:

Nom de la couleur
Valeur hexadecimal
Code RGB
transparent

Voir un exemple

Effet simple sur les bordures

Vous pouvez définir des effets simples avec du css comme une bordure en pointillé.

border-style: valeur;

Valeurs possibles:

dashed
dotted
double
groove
hidden
inset
none
outset
ridge
solid

Voir des exemples

A savoir Dans vos déclarations, définissez toujours la propriété de "border-style" avant la propriété de "border-color". En effet une bordure doit etre matérialisée avant d'etre coloriée !

Taille d'un bord

Vous pouvez définir la taille d'un bord avec la propriété :

border-width: valeur;

Valeurs possibles:

Voir des exemples

Bordure et position

Chaque cotés de votre éléments pour faire l'objet d'une apparence de votre choix !

Il est donc possible de déterminer un coté précis et définir son apparence :

border-bottom: 1px solid #333333;

Position et couleur:

Vous pouvez définir la couleur de la bordure du bas grace à la propriété : border-bottom-color

border-bottom-color: valeur;

Vous pouvez définir la couleur de la bordure de gauche grace à la propriété : border-left-color

border-left-color: valeur;

Vous pouvez définir la couleur de la bordure de droite grace à la propriété : border-right-color

border-right-color: valeur;

Vous pouvez définir la couleur de la bordure du haut grace à la propriété : border-top-color

border-top-color: valeur;

Position et effet sur la bordure

Vous pouvez définir un effet, comme pointillé sur la bordure du bas grace à la propriété :border-bottom-style

border-bottom-style: valeur;

Vous pouvez définir un effet pointillé sur la bordure de gauche grace à la propriété :border-left-style

border-left-style: valeur;

Vous pouvez définir un effet pointillé sur la bordure de droite grace à la propriété :border-right-style

border-right-style: valeur;

Vous pouvez définir un effet pointillé en css sur la bordure du haut grace a la propriété :border-top-style

border-top-style: valeur;

Position et taille de la bordure

Vous pouvez définir la taille de la bordure du bas en css grace à la propriété :border-bottom-width

border-bottom-width: valeur;

Vous pouvez définir la taille de la bordure gauche en css grace à la propriété :border-left-width

border-left-width: valeur;

Vous pouvez définir la taille de la bordure de droite en css grace à la propriété :border-right-width

border-right-width: valeur;

Vous pouvez définir la taille de la bordure du haut en css grace à la propriété :border-top-width

CSS : color, style, width