Border

La propriété border a une vocation principalement esthétique, permettant d'ajouter une bordure à un élément.

border-width

La sous-propriété border-width permet de définir la taille de la bordure. Cette valeur peut-être n'importe quelle unité de mesure CSS.

Par exemple:

border-style

Comme son nom l'indique, cette propriété permet de définir le style de la bordure.

Styles disponibles:

• none (par défaut)
• solid ligne standard (plus commun)
• dotted pointillé
• dashed hachuré
• double double ligne
• groove bordure 3D donnant l'impression que le bordure a été gravée
• ridge bordure 3D donnant l'impression que la bordure ressort
• inset bordure 3D donnant l'impression que l'élément est enfoncé
• outset bordure 3D donnant l'impression que l'élément ressort

border-color

Permets de définir la couleur de la bordure.

Par exemple:

Syntaxe courte

Il est aussi possible de définir ces trois propriétés avec une syntaxe courte en utilisant simplement la propriété border et en lui passant les différentes valeurs mentionnées précédemment.

Par exemple:

border-radius

Permets de définir des coins arrondis sur un élément.

Si chaque coin d'un élément est arrondi jusqu'à sa moitié, les coins arrondis se rejoignent et créer un ovale. Si l'élément est aussi haut que large, cet ovale devient alors un cercle comme dans l'exemple ci-dessus lorsque la dernière option est sélectionnée.

Note

Cette propriété s’applique qu’une bordure soit visible ou non sur l’élément.

Contrôle des coins individuellement

Il est possible de contrôler individuellement chaque coin d'un élément afin de créer des formes particulières. Pour ce faire, il est possible d'utiliser les propriétés:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

Ou encore de spécifier les multiples valeurs à même la propriété. Les coins sont spécifiés dans le sens des aiguilles d'une montre ⌚️ en commençant à partir du coin supérieur gauche.

Par exemple:

Outils

Fancy border-radius
Générateur de border-radius.
Fancy border-radius

Exercices

Border-radius - Q-bitz
Pour cet exercice vous devez recréer un motif à partir de tuiles contenant des formes, comme dans le célèbre jeu de scociété Q-bitz.
Border-radius - Q-bitz