CSS Débutant .com

Les bordures en CSS

Vous pouvez définir la couleur de vos tableaux, 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)

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

Vous pouvez définir des effets simples 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 être matérialisée avant d'être coloriée !

Vous pouvez définir la taille d'un bord avec la propriété :
border-width: valeur;

Valeurs possibles:

• Length
• Thin
• Medium
• Thick

Voir des exemples

Chaque cotés de votre élements 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-<b>bottom</b>: 1px solid #333333;

Position et couleur:

Vous pouvez définir la couleur de la bordure du bas grâce à la propriété : border-bottom-color
border-bottom-color: valeur;

Vous pouvez définir la couleur de la bordure de gauche grâce à la propriété : border-left-color
border-left-color: valeur;

Vous pouvez définir la couleur de la bordure de droite grâce à la propriété : border-right-color
border-right-color: valeur;

Vous pouvez définir la couleur de la bordure du haut grâce à 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 grâce à la propriété :border-bottom-style
border-bottom-style: valeur;

Vous pouvez définir un effet, comme pointillé sur la bordure de gauche grâce à la propriété :border-left-style
border-left-style: valeur;

Vous pouvez définir un effet, comme pointillé sur la bordure de droite grâce à la propriété :border-right-style
border-right-style: valeur;

Vous pouvez définir un effet, comme pointillé sur la bordure du haut grâce à 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 grâce à la propriété :border-bottom-width
border-bottom-width: valeur;

Vous pouvez définir la taille de la bordure de gauche grâce à la propriété :border-left-width
border-left-width: valeur;

Vous pouvez définir la taille de la bordure de droite grâce à la propriété :border-right-width
border-right-width: valeur;

Vous pouvez définir la taille de la bordure du haut grâce à la propriété :border-top-width
border-top-width: valeur;


Voir des exemples