Bordures CSS


Table des matières

    Afficher la table des matières


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


J'ai des frontières de tous les côtés.


J'ai une bordure inférieure rouge.


J'ai des bordures arrondies.


J'ai une bordure bleue à gauche.


Style de bordure CSS

La propriété class="w3-codespan">border-style spécifie le type de bordure à afficher.

Les valeurs suivantes sont autorisées :

class="w3-codespan">dotted

- Définit une bordure en pointillés

class="w3-codespan">solid

- Définit une bordure solide

class="w3-codespan">double

- Définit une double bordure

class="w3-codespan">groove

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

class="w3-codespan">ridge

- Définit une bordure striée 3D. L'effet dépend de la valeur de la couleur de la bordure

class="w3-codespan">inset

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

class="w3-codespan">outset

- Définit une bordure initiale 3D. L'effet dépend de la valeur de la couleur de la bordure

class="w3-codespan">none

- Ne définit aucune frontière

class="w3-codespan">hidden

- Définit une bordure cachée

La propriété class="w3-codespan">border-style peut avoir de une à quatre valeurs (par exemple la bordure supérieure, la bordure droite, la bordure inférieure et la bordure gauche).

Exemple

Démonstration des différents styles de bordure :

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;}

Résultat :

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
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;}
</style>
</head>
<body>

<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>


Remarque : Aucune des AUTRES propriétés de bordure CSS (que vous découvrirez plus en détail dans les prochains chapitres) n'aura AUCUN effet à moins que la La propriété class="w3-codespan">border-style est définie !