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

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 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 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;

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

 

Le CSS en 3 questions/réponses – en bref

🖥️ C'est quoi HTML et CSS ?

Le CSS est un langage informatique utilisé pour mettre en forme les fichiers HTML sur un site web. Ainsi, les fichiers CSS permettent de gérer l’aspect graphique d’une page en HTML

🤔 Qu'est-ce que le CSS ?

CSS est l’acronyme de « Cascading Style Sheets » c’est à dire « feuille de style en cascade ». Le CSS est un langage informatique permettant de mettre en forme des pages web (HTML ou XML).

📆 Différence entre CSS et CSS3 ?

CSS3 est la dernière version de CSS. Il fournit des capacités de type JavaScript. En plus de cela, il fournit également des fonctionnalités de développement mobile.