Les bordures

Une bordure et un cadre qui entoure des objets comme les images, cellules d'un tableau, conteneurs... CSS offre des styles qui cassent le rendu par défaut appliqué aux bordures à l'aide du HTML par le biais de propriétés que l'on peut personnaliser à notre guise, ce qui offre des possibilités illimitées pour avoir un design optimal.

Propriété border-color

La propriété border-color permet de définir la couleur de la bordure. Elle peut être définie par son nom (anglais), le code hexadécimal, le code décimal (rgb) ou le code décimal avec prise en charge de la transparence (rgba).

Exemple:

Propriété border-width

La propriété border-width permet de définir l'épaisseur de la bordure. Elle est exprimée en pixel (l'unité la plus appropriée). Cependant on peut recourir à d'autres unités comme cm, mm, in...

Exemple:

Propriété border-style

La propriété border-style permet de définir le style de la bordure. Le style de la bordure définit plusieurs formes grâce aux valeurs que l'on peut résumer ci-après:

• solid: pour une bordure solide, c'est à dire, tracée sous forme de trait continu.
• dotted: pour une bordure pointillée.
• dashed: pour une bordure constituée de tirets.
• double: la bordure est doublée (deux traits parallèles).
• ridge: donne une bordure en relief.
• groove: pour une bordure rainurée.
• inset: pour une bordure en relief vers l’intérieur.
• outset: pour une bordure en relief vers l’extérieur.
• none: aucune bordure n'est appliquée.
• inherit: hérite le même style de bordure que l'élément parent (conteneur).

Exemple:

Si on veut avoir des styles différents pour chacune des quatre bordures appliquées autour de l'objet, alors on remplace le préfixe border par:

• border-top: qui désigne la bordure supérieure
• border-right: qui désigne la bordure droite
• border-bottom: qui désigne la bordure inférieure
• border-left: qui désigne la bordure gauche

Exemple:
Cela fait trop de code n'est ce pas? Heureusement on peut remplacer ces quatre lignes par ceci;
En effet, si vous spécifiez plusieurs valeurs séparées par espace le navigateur applique les style dans le sens suivant: bordure supérieure -> bordure droite -> bordure inférieure -> bordure gauche.

On peut même regrouper tous les styles vues pour les bordures dans une seule propriété qui est border comme ceci:

Propriété border-radius

La version 3 de CSS a introduit une nouvelle propreté qui s'applique au bordures. Il s'agit de border-radius qui applique un arrondi sur les coins de l'objet qui accueille la bordure.

En effet, avant CSS3 les objets susceptibles d’accueillir des bordures comme les cellules d'un tableau, les conteneurs, les champs de formulaires... était de forme rectangulaire avec des coins en angle droit. Désormais, et grâce à CSS3, cela a changé. On peut donc avoir des arrondis qui modifient l'apparence classique. La syntaxe ressemble à ceci:
Ce qui donne:
Essayons maintenant le code suivant:
Le résultat est:
Et oui, nous avons obtenu un cercle. En fait, radius signifie rayon. La propriété border-radius arrondi le coin de l'objet de telle sorte à ce qu'il représente le un quart de cercle dont le rayon mesure la valeur attribuée à la propriété. Dans l'exemple précédent, nous avons déclaré un rayon égal à la moitié de la largeur et la hauteur de la balise <div>. On a donc appliqué 4 quarts de cercle sur tous les coins. Réunis, ils forment un cercle parfait. Super non?

Si on veut appliquer des arrondis différents à chaque angle d'un objet on procède ainsi:
A, B, C et D représentent respectivement les valeurs des arrondis appliquées aux angles: supérieur gauche, supérieur droit, inférieur droit et inférieure gauche.
Dans le sens horaire.

Exemple

Code HTML:
Code CSS:
Résultat:

Les bordures en vidéo