Bordures
Propriétés d'une bordure
La bordure d'un élémemt HTML possède toujours 3 propriétés distinctes, soit son épaisseur, son style et sa couleur.
- Épaisseur
- C'est essentiellement la taille de la bordure. On lui donnera une taille en pixel (px) pour le moment.
- Style
- C'est le format visuel de la bordure. Il existe plusieurs formats, en voici la liste:
- none / hidden : Aucune bordure visible
- dotted : Bordure pointillé
- dashed : Bordure en tirets
- solid : Bordure normale
- double : Bordure double
- groove / ridge : Bordure 3D
- inset / outset : Autre bordure 3D
- Couleur
- La couleur de la bordure. Vous pouvez utiliser les formats des couleurs que nous avons vu précédement ici.
Propriété générique
Pour spécifier une bordure à un élément, vous utiliserez généralement la propriété border. Avec cette propriété, nous pouvons spécifier l'épaisseur, le style et la couleur de la bordure dans la même propriété.
HTML
CSS
À noter:
Il existe d'autres façons de manipuler les bordures, comme avec les propriétés border‑width, border‑style et border‑color. Il est effectivement possible de manipuler l'épaisseur, le style et la couleur des bordures indépendamment avec ces propriétés. Nous préfèrerons toutefois utiliser la propriété border puisqu'elle est plus courte à écrire.
Bordures séparées
Il est possible d'utiliser les propriétés border‑top, border‑right, border‑bottom et border‑right pour modifier la bordure d'un côté spécifique d'un élément. Il est donc possible de mettre une bordure différente à chaque côté de notre élément.
HTML
CSS
Il est aussi possible de mettre une seule bordure avec ces propriétés, ce qui est souvent désiré par les designers graphique.
HTML
CSS