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 lignegroove
bordure 3D donnant l'impression que le bordure a été gravéeridge
bordure 3D donnant l'impression que la bordure ressortinset
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.
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: