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.
- border-color: Couleur de la bordure
- border-style: Apparence de la bordure
- 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:
- Nom de la couleur
- Valeur hexadecimal
- Code RGB
- transparent
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 d'un tableau 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
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
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