Frontière - Astuces CSS

La borderpropriété est une syntaxe abrégée en CSS qui accepte plusieurs valeurs pour dessiner une ligne autour de l'élément auquel elle est appliquée.

.box ( border: 3px solid red; height: 200px; width: 200px; )

Valeurs

La borderpropriété accepte une ou plusieurs des valeurs suivantes en combinaison:

border: || || 

• border-width: Spécifie l'épaisseur de la bordure.
  • : Une valeur numérique mesurée en px, em, rem, vhet les vwunités.
  • thin: L'équivalent de 1px
  • medium: L'équivalent de 3px
  • thick: L'équivalent de 5px
• border-style: Spécifie le type de ligne tracée autour de l'élément, y compris:
  • solid: Une ligne solide et continue.
  • none (par défaut): aucune ligne n'est dessinée.
  • hidden: Une ligne est dessinée, mais non visible. cela peut être pratique pour ajouter un peu de largeur supplémentaire à un élément sans afficher de bordure.
  • dashed: Une ligne composée de tirets.
  • dotted: Une ligne composée de points.
  • double: Deux lignes sont dessinées autour de l'élément.
  • groove: Ajoute un biseau basé sur la valeur de la couleur de manière à faire apparaître l'élément enfoncé dans le document.
  • ridge: Similaire à groove, mais inverse les valeurs de couleur de manière à faire apparaître l'élément en relief.
  • inset: Ajoute une tonalité partagée à la ligne qui fait apparaître l'élément légèrement enfoncé.
  • outset: Similaire à inset, mais inverse les couleurs de manière à ce que l'élément apparaisse légèrement en relief.
• color: Spécifie la couleur de la bordure et accepte ,, , , , , currentcolor and

Phew, that’s a lot of values for one little ol’ property! Here’s a demo that illustrates the differences between all of those style values:

See the Pen CSS border by Geoff Graham (@geoffgraham) on CodePen.

Browser Support

You can count on excellent support for the border property across all browsers.

Chrome	Safari	Firefox	Opéra	C'EST À DIRE	Android	iOS
Tout	Tout	Tout	3,5+	4+	Tout	Tout

Related Properties

What we covered here is specific to the border property, but there are other properties that provide even more options for styling borders.

• border-collapse: Specifies the spacing between borders on the
• border-image: Allows the use of an image to draw the border instead of a solid color.
• border-radius: Provides control for rounded corners.

More Information

• CSS Backgrounds and Borders Module Level 3 Specification
• Understanding border-image
• A Tale of Border Gradients

---




element. #####