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


bouton de manchette clavierA découvrir les boutons de manchette Geek :) - Des idées de cadeaux à petits prix :)

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

  • 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.

    Voulez-vous laisser une note ou un commentaire ?

    Donnez votre avis sur ce contenu :
    Votes: 4.7 (100%) 87 votes