29 Mar 2020

CSS Bordures

by | posted in: css | 0

Propriétés de bordure CSS

Les borderpropriétés CSS vous permettent de spécifier le style, la largeur et la couleur de la bordure d’un élément.

Style de bordure CSS

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

Les valeurs suivantes sont autorisées:

  • dotted – Définit une bordure en pointillé
  • dashed – Définit une bordure en pointillés
  • solid – Définit une bordure solide
  • double – Définit une double bordure
  • groove– Définit une bordure rainurée 3D. L’effet dépend de la valeur de la couleur de la bordure
  • ridge– Définit une bordure striée 3D. L’effet dépend de la valeur de la couleur de la bordure
  • inset– Définit une bordure d’encart 3D. L’effet dépend de la valeur de la couleur de la bordure
  • outset– Définit une bordure de départ 3D. L’effet dépend de la valeur de la couleur de la bordure
  • none – Ne définit aucune frontière
  • hidden – Définit une bordure cachée

La border-stylepropriété peut avoir de une à quatre valeurs (pour la bordure supérieure, la bordure droite, la bordure inférieure et la bordure gauche).

Exemple

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Essayez-le vous-même

Remarque: Aucune des AUTRES propriétés de bordure CSS (dont vous en apprendrez plus dans les chapitres suivants) n’aura AUCUN effet à moins que la border-stylepropriété ne soit défini

Largeur de bordure CSS

La border-widthpropriété spécifie la largeur des quatre bordures.

La largeur peut être définie comme une taille spécifique (en px, pt, cm, em, etc.) ou en utilisant l’une des trois valeurs prédéfinies: fine, moyenne ou épaisse:

Exemple

Démonstration des différentes largeurs de bordure:

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

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

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

Essayez-le vous-même

Largeurs latérales spécifiques

La border-width propriété peut avoir de une à quatre valeurs (pour la bordure supérieure, la bordure droite, la bordure inférieure et la bordure gauche):

Exemple

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}

Essayez-le vous-même

Couleur de bordure CSS

La border-colorpropriété est utilisée pour définir la couleur des quatre bordures.

La couleur peut être définie par:

  • nom – spécifiez un nom de couleur, comme « rouge »
  • HEX – spécifiez une valeur HEX, comme « # ff0000 »
  • RVB – spécifiez une valeur RVB, comme « rgb (255,0,0) »
  • HSL – spécifiez une valeur HSL, comme « hsl (0, 100%, 50%) »
  • transparent

Remarque: Si border-colorn’est pas défini, il hérite de la couleur de l’élément.

Exemple

Démonstration des différentes couleurs de bordure:p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

Essayez-le vous-même

Couleurs latérales spécifiques

La border-colorpropriété peut avoir de une à quatre valeurs (pour la bordure supérieure, la bordure droite, la bordure inférieure et la bordure gauche). 

Exemple

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}

Essayez-le vous-même

Valeurs HEX

La couleur de la bordure peut également être spécifiée à l’aide d’une valeur hexadécimale (HEX):

Exemple

p.one {
  border-style: solid;
  border-color: #ff0000; /* red */
}

Essayez-le vous-même

Valeurs RVB

Ou en utilisant des valeurs RVB:

Exemple

p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* red */
}

Essayez-le vous-même

Valeurs HSL

Vous pouvez également utiliser des valeurs HSL:

Exemple

p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* red */
}

Essayez-le vous-même

Bordure CSS – Côtés individuels

À partir des exemples des pages précédentes, vous avez vu qu’il est possible de spécifier une bordure différente pour chaque côté.

En CSS, il existe également des propriétés pour spécifier chacune des bordures (haut, droit, bas et gauche):

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 donne le même résultat que celui-ci:

Exemple

p {
  border-style: dotted solid;
}

Essayez-le vous-même

Alors, voici comment cela fonctionne:

Si la border-stylepropriété a quatre valeurs:

  • style bordure: pointillé solide double pointillé;
    • la bordure supérieure est en pointillés
    • la bordure droite est solide
    • la bordure inférieure est double
    • la bordure gauche est en pointillés

Si la border-stylepropriété a trois valeurs:

  • style bordure: double solide en pointillé;
    • la bordure supérieure est en pointillés
    • les bordures droite et gauche sont solides
    • la bordure inférieure est double

Si la border-stylepropriété a deux valeurs:

  • style bordure: solide en pointillé;
    • les bordures supérieure et inférieure sont en pointillés
    • les bordures droite et gauche sont solides

Si la border-stylepropriété a une valeur:

  • style bordure: pointillé;
    • les quatre bordures sont en pointillés

Exemple

/* Four values */
p {
  border-style: dotted solid double dashed;
}

/* Three values */
p {
  border-style: dotted solid double;
}

/* Two values */
p {
  border-style: dotted solid;
}

/* One value */
p {
  border-style: dotted;
}

Essayez-le vous-même

La border-stylepropriété est utilisée dans l’exemple ci-dessus. Cependant, il fonctionne également avec border-width et border-color.

Bordure CSS – Propriété sténographique

Comme vous l’avez vu dans la page précédente, il existe de nombreuses propriétés à considérer lors du traitement des bordures.

Pour raccourcir le code, il est également possible de spécifier toutes les propriétés de bordure individuelles dans une propriété.

La borderpropriété est une propriété abrégée pour les propriétés de bordure individuelles suivantes:

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

Exemple

p {
  border: 5px solid red;
}

Essayez-le vous-même

Vous pouvez également spécifier toutes les propriétés de bordure individuelles pour un seul côté:

Bordure gauche

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

Essayez-le vous-même

Bordure inférieure

p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}

Essayez-le vous-même

Bordures arrondies CSS

La border-radiuspropriété est utilisée pour ajouter des bordures arrondies à un élément.

Document suivant : CSS Marges