Côtés de bordure CSS


Table des matières

    Afficher la table des matières


Bordure CSS - Côtés individuels

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

En CSS, il existe également des propriétés permettant de spécifier chacune des bordures (top, droite, bas et gauche) :

Exemple

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

Résultat :

Different Border Styles

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>

</body>
</html>


L'exemple ci-dessus donne le même résultat que ceci :

Exemple

p {	border-style: dotted solid;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: dotted solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>

</body>
</html>


Voici donc comment cela fonctionne :

Si la propriété class="w3-codespan">border-style a quatre valeurs :

  • border-style : pointillé plein double tiret ;

    • 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 propriété class="w3-codespan">border-style a trois valeurs :

  • style de 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 propriété class="w3-codespan">border-style a deux valeurs :

  • style de bordure : solide en pointillé ;

    • les bordures supérieure et inférieure sont en pointillés

    • les bordures droite et gauche sont solides

Si la propriété class="w3-codespan">border-style a une valeur :

  • style de 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 →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  text-align: center;
}
/* Four values */
p.four {
  border-style: dotted solid double dashed;
}

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

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

/* One value */
p.one {
  border-style: dotted;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p class="four">4 different border styles.</p>
<p class="three">3 different border styles.</p>
<p class="two">2 different border styles.</p>
<p class="one">1 border style.</p>

</body>
</html>


La propriété class="w3-codespan">border-style est utilisée dans l'exemple ci-dessus. Cependant, cela fonctionne également avec class="w3-codespan">largeur de bordure et class="w3-codespan">border-color.