Border

3

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é CSS.

Par exemple:

Voir le CodePen de Simon Arnold (@smnarnold).

Raccourci Emmet: bdw

Pour en savoir plus, voir cet article MDN à propos de border-width.

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

Voir le CodePen de Simon Arnold (@smnarnold).

Raccourci Emmet: bds

Pour en savoir plus, voir cet article MDN à propos de border-style.

Border-color

Permets de définir la couleur de la bordure.

Par exemple:

Voir le CodePen de Simon Arnold (@smnarnold).

Raccourci Emmet: bdc

Pour en savoir plus, voir cet article MDN à propos de border-color.

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:

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN à propos de border.

Border-radius

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

Voir le CodePen de Simon Arnold (@smnarnold).

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.

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

Raccourci Emmet: bdrs

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:

Voir le CodePen de Simon Arnold (@smnarnold).

Générateur de border-radius: Fancy Border-radius

Pour en savoir plus, voir cet article MDN à propos de border-radius.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme