CSS Border

CSS Border est une propriété utilisée pour définir le style de la bordure d'un élément.

Les bordures peuvent être appliquées à n'importe quel élément HTML pour améliorer les effets visuels, séparer le contenu ou mettre en évidence des éléments.

Les propriétés CSS border incluent principalement la largeur de bordure, le style de bordure, la couleur de bordure et les propriétés raccourcies.

Propriétés CSS border

Les propriétés CSS border vous permettent de spécifier le style et la couleur de la bordure d'un élément.

Bordure sur les quatre côtés


Bordure inférieure rouge


Bordure arrondie


La bordure gauche a une largeur, la couleur est bleue

Style de bordure

La propriété border-style spécifie le type de bordure à afficher.

border-styleLa propriété est utilisée pour spécifier le type de bordure à afficher.

Les valeurs autorisées sont les suivantes :

  • dotted: Définit une bordure pointillée.
  • dashed: Définit une bordure en tirets.
  • solid: Définit une bordure solide.
  • double: Définit une bordure double.
  • groove: Définit une bordure rainurée en 3D. L'effet dépend de la valeur de border-color.
  • ridge : Définit une bordure 3D en relief. L'effet dépend de la valeur de border-color.
  • inset : Définit une bordure 3D enfoncée. L'effet dépend de la valeur de border-color.
  • outset : Définit une bordure 3D en saillie. L'effet dépend de la valeur de border-color.
  • none : Ne définit aucune bordure.
  • hidden : Définit une bordure cachée.

Démo border-style :

none : Aucune bordure par défaut


dotted : Définit une bordure pointillée


dashed : Définit une bordure en tirets


solid : Définit une bordure solide


double : Définit deux bordures. La largeur des deux bordures est identique à la valeur de border-width


groove : Définit une bordure 3D rainurée. L'effet dépend de la valeur de la couleur de la bordure


ridge : définit une bordure 3D avec arête. L'effet dépend de la valeur de la couleur de la bordure


inset : définit une bordure 3D incrustée. L'effet dépend de la valeur de la couleur de la bordure


outset : définit une bordure 3D saillante. L'effet dépend de la valeur de la couleur de la bordure


Essayez-le vous-même »

Largeur de bordure

Vous pouvez spécifier la largeur d'une bordure à l'aide de la propriété border-width.

Il existe deux façons de spécifier la largeur d'une bordure : vous pouvez spécifier une valeur de longueur, telle que 2px ou 0.1em (avec des unités comme px, pt, cm, em, etc.), ou utiliser l'un des 3 mots-clés, à savoir thick, medium (valeur par défaut) et thin.

Remarque :CSS ne définit pas les largeurs spécifiques des 3 mots-clés, donc un utilisateur peut définir thick, medium et thin sur 5px, 3px et 2px respectivement, tandis qu'un autre utilisateur peut les définir sur 3px, 2px et 1px respectivement.

Exemple

p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; }

Essayez-le vous-même »

Couleur de bordure

La propriété border-color est utilisée pour définir la couleur de la bordure. Les couleurs qui peuvent être définies :

  • name - Spécifie le nom de la couleur, tel que "red"
  • RGB - Spécifiez des valeurs RGB, telles que "rgb(255,0,0)"
  • Hex - spécifie une valeur hexadécimale, par ex. "#ff0000"

Vous pouvez également définir la couleur de la bordure sur "transparent".

Remarque :border-color seul n'a aucun effet ; vous devez d'abord utiliser border-style pour définir le style de bordure.

Exemple

p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; }

Essayez-le vous-même »

Bordures - Définir chaque côté individuellement

En CSS, vous pouvez spécifier différentes bordures pour différents côtés :

Exemple

p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }

Essayez-le vous-même »

L'exemple ci-dessus peut également être défini avec une seule propriété :

Exemple

border-style:dotted solid;

Essayez-le vous-même »

La propriété border-style peut avoir 1-4 valeurs :

  • border-style:dotted solid double dashed;
    • La bordure supérieure est dotted
    • La bordure droite est solid
    • La bordure inférieure est double
    • La bordure gauche est dashed

  • border-style:dotted solid double;
    • La bordure supérieure est dotted
    • Les bordures gauche et droite sont solid
    • La bordure inférieure est double

  • border-style:dotted solid;
    • Les bordures supérieure et inférieure sont dotted
    • Les bordures droite et gauche sont solid

  • border-style:dotted;
    • Les quatre bordures sont en pointillés

L'exemple ci-dessus utilise border-style. Toutefois, il peut aussi être utilisé avec border-width et border-color.

Propriété raccourcie border

L'exemple ci-dessus a utilisé de nombreuses propriétés pour définir la bordure.

Vous pouvez également définir la bordure en une seule propriété.

Vous pouvez définir les éléments suivants dans la propriété "border" :

  • border-width
  • border-style (obligatoire)
  • border-color

Exemple

border:5px solid red;

Essayez-le vous-même »

Examples

Plus d’exemples

Toutes les propriétés de bordure en une seule déclaration
Cet exemple montre comment utiliser la propriété raccourcie pour définir les quatre propriétés de bordure dans la même déclaration.

Définir le style de la bordure inférieure
Cet exemple montre comment définir le style de la bordure inférieure.

Définir la largeur de la bordure gauche
Cet exemple montre comment définir la largeur de la bordure gauche.

Définir la couleur des quatre bordures
Cet exemple montre comment définir la couleur de quatre bordures. On peut définir d'une à quatre couleurs.

Définir la couleur de la bordure droite
Cet exemple montre comment définir la couleur de la bordure droite.

Définir une bordure en dégradé
Cet exemple montre comment définir des bordures en dégradé.

Propriétés CSS border

Propriété Description
border Une propriété raccourcie utilisée pour définir les propriétés des quatre côtés en une seule déclaration.
border-style Utilisée pour définir le style de toutes les bordures d'un élément, ou pour définir les styles de bordure pour chaque côté séparément.
border-width Une propriété raccourcie utilisée pour définir la largeur de toutes les bordures d'un élément, ou pour définir les largeurs de bordure de chaque côté séparément.
border-color Une propriété raccourcie qui définit la couleur des parties visibles de toutes les bordures d'un élément, ou définit les couleurs des 4 côtés séparément.
border-bottom Une propriété raccourcie utilisée pour définir toutes les propriétés de la bordure inférieure en une seule déclaration.
border-bottom-color Définit la couleur de la bordure inférieure d'un élément.
border-bottom-style Définit le style de la bordure inférieure d'un élément.
border-bottom-width Définit la largeur de la bordure inférieure d'un élément.
border-left Propriété raccourcie utilisée pour définir toutes les propriétés de la bordure gauche en une seule déclaration.
border-left-color Définit la couleur de la bordure gauche d'un élément.
border-left-style Définit le style de la bordure gauche d'un élément.
border-left-width Définit la largeur de la bordure gauche d'un élément.
border-right Propriété raccourcie utilisée pour définir toutes les propriétés de la bordure droite en une seule déclaration.
border-right-color Définit la couleur de la bordure droite d'un élément.
border-right-style Définit le style de la bordure droite d'un élément.
border-right-width Définit la largeur de la bordure droite d'un élément.
border-top Propriété raccourcie utilisée pour définir toutes les propriétés de la bordure supérieure en une seule déclaration.
border-top-color Définit la couleur de la bordure supérieure d'un élément.
border-top-style Définit le style de la bordure supérieure d'un élément.
border-top-width Définit la largeur de la bordure supérieure d'un élément.
border-radius Définit la bordure avec des coins arrondis.
autres extensions