Gestion des bordures en CSS
Bordures, couleurs, tailles, tableaux

Les bordures en CSS : tableau rapide avec CSS !

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

  1. border-color: Couleur de la bordure
  2. border-style: Apparence de la bordure
  3. border-width: Taille de la bordure

A savoir : 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:
  1. Nom de la couleur
  2. Valeur hexadecimal
  3. Code RGB
  4. transparent
Voir un exemple de border-color en CSS

Effet simple sur les bordures

code CSS Vous pouvez définir des effets simples avec du css comme une bordure en pointillé. border-style: valeur;
Valeurs possibles:
  1. dashed
  2. dotted
  3. double
  4. groove
  5. hidden
  6. inset
  7. none
  8. outset
  9. ridge
  10. 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 d'un tableau avec la propriété :border-width: valeur;
Valeurs possibles:
  1. Length
  2. Thin
  3. Medium
  4. Thick

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
border-top-width: valeur;

Voir des exemples

Liens vers d'autres sujets sur le CSS : [Bordure en CSS] - [Définir l'apparence sur une liste (puce
  • ) en CSS] -

  • Voulez-vous laisser une note ou un commentaire ?

    Avis sur la page http://www.cssdebutant.com/coder-en-css-border-color-style-width.html Votes: 4.8 / 5 étoiles - 65 vote(s) et 10 commentaires