border-style

  • Raccourci de la révision : CSS/border-style
  • Titre de la révision : border-style
  • ID de la révision : 89779
  • Créé :
  • Créateur : Kyodev
  • Version actuelle ? Non
  • Commentaire /* Résumé */ correction lien média visuel

Contenu de la révision

{{template.CSSRef()}}

Résumé

La propriété border-style est un raccourci pour définir le style de ligne des quatre côtés de la bordure d'un élément.

  • Valeur initiale : aucune, ou suivant les propriétés individuelles.
  • Appliquée à : tous les éléments.
  • Héritée : non.
  • Pourcentages : N/A
  • Média: Visuel
  • Valeur calculée : comme les propriétés individuelles.

Syntaxe

border-style: [ <border-style> ]{1,4} | inherit

Valeurs

<border-style> 
Le style de bordure peut prendre l'une des valeurs suivantes :
none 
Aucune bordure, la largeur de la bordure est égale à 0. C'est la valeur par défaut.
hidden 
Identique à none, excepté pour la résolution des problèmes de bordures, pour les éléments de tableau par exemple.
dashed 
Lignes discontinues (tirets).
dotted 
Lignes pointillées.
double 
Deux lignes droites continues séparées d'un nombre de pixels défini par border-width.
groove 
Effet de gravure.
inset 
La boite semble enfoncée.
outset 
Opposé de inset. La boîte semble sortir de la page.
ridge 
Opposé de groove. La bordure semble sortir de la page.
solid 
Ligne droite continue.

Vous pouvez passer jusqu'à 4 valeurs :

  • Si une seule valeur est définie, elle s'applique aux quatre cotés.
  • Si deux valeurs sont définies, la première valeur s'applique aux côtés haut et bas de la bordure et la seconde aux côtés gauche et droit.
  • Si trois valeurs sont définies, la premièrere s'applique au côté haut de la bordure, la deuxième aux côtés gauche et droit et la troisième au côté bas.
  • Si quatre valeurs sont définies, la première s'applique au côté haut de la bordure, la deuxième au côté droit, la troisième au côté bas et la quatrième au côté gauche.

Exemples

{{template.CSSRefExampleLink("border")}}

element { 
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

Notes

La valeur par défaut de border-style est none. Cela signifie que si vous modifiez {{template.Cssxref("border-width")}} et {{template.Cssxref("border-color")}} vous ne verrez pas s'afficher de bordure, à moins de modifier également cette propriété avec une valeur différente de none ou de hidden.

Spécifications

Compatibilité des navigateurs

Navigateur Version minimale
Internet Explorer 4
Firefox 1
Netscape 4
Opera 3.5


Voir également

{{template.Cssxref("border")}}, {{template.Cssxref("border-width")}}, {{template.Cssxref("border-color")}}, {{template.Cssxref("-moz-border-radius")}}

Interwiki Languages Links

{{ wiki.languages( { "en": "en/CSS/border-style" } ) }}

Source de la révision

<p>
</p><p>{{template.CSSRef()}}
</p>
<h3 name="R.C3.A9sum.C3.A9"> Résumé </h3>
<p>La propriété <code>border-style</code> est un raccourci pour définir le style de ligne des quatre côtés de la bordure d'un élément.
</p>
<ul><li> Valeur initiale : aucune, ou suivant les propriétés individuelles.
</li><li> Appliquée à : tous les éléments.
</li><li> Héritée : non.
</li><li> Pourcentages : N/A
</li><li> Média: <a href="fr/CSS/M%c3%a9dia/Visuel">Visuel</a>
</li><li> Valeur calculée : comme les propriétés individuelles.
</li></ul>
<h3 name="Syntaxe"> Syntaxe </h3>
<pre class="eval">border-style: [ &lt;border-style&gt; ]{1,4} | <i>inherit</i>
</pre>
<h3 name="Valeurs"> Valeurs </h3>
<dl><dt> &lt;border-style&gt; </dt><dd> Le style de bordure peut prendre l'une des valeurs suivantes :
</dd></dl>
<dl><dt> <code>none</code> </dt><dd> Aucune bordure, la largeur de la bordure est égale à 0. C'est la valeur par défaut.
</dd><dt> <code>hidden</code> </dt><dd> Identique à <code>none</code>, excepté pour la résolution des problèmes de bordures, pour les éléments de tableau par exemple.
</dd><dt> <code>dashed</code> </dt><dd> Lignes discontinues (tirets).
</dd><dt> <code>dotted</code> </dt><dd> Lignes pointillées.
</dd><dt> <code>double</code> </dt><dd> Deux lignes droites continues séparées d'un nombre de pixels défini par <code>border-width</code>.
</dd><dt> <code>groove</code> </dt><dd> Effet de gravure.
</dd><dt> <code>inset</code> </dt><dd> La boite semble enfoncée.
</dd><dt> <code>outset</code> </dt><dd> Opposé de <code>inset</code>. La boîte semble sortir de la page.
</dd><dt> <code>ridge</code> </dt><dd> Opposé de <code>groove</code>. La bordure semble sortir de la page.
</dd><dt> <code>solid</code> </dt><dd> Ligne droite continue.
</dd></dl>
<p>Vous pouvez passer jusqu'à 4 valeurs :
</p>
<ul><li> Si une seule valeur est définie, elle s'applique aux quatre cotés.
</li><li> Si deux valeurs sont définies, la première valeur s'applique aux côtés haut et bas de la bordure et la seconde aux côtés gauche et droit.
</li><li> Si trois valeurs sont définies, la premièrere s'applique au côté haut de la bordure, la deuxième aux côtés gauche et droit et la troisième au côté bas.
</li><li> Si quatre valeurs sont définies, la première s'applique au côté haut de la bordure, la deuxième au côté droit, la troisième au côté bas et la quatrième au côté gauche.
</li></ul>
<h3 name="Exemples"> Exemples </h3>
<p>{{template.CSSRefExampleLink("border")}}
</p>
<pre class="eval">element { 
  border-width: 1px;
  border-style: solid;
  border-color: black;
}
</pre>
<h3 name="Notes"> Notes </h3>
<p>La valeur par défaut de <code>border-style</code> est <code>none</code>. Cela signifie que si vous modifiez {{template.Cssxref("border-width")}} et {{template.Cssxref("border-color")}} vous ne verrez pas s'afficher de bordure, à moins de modifier également cette propriété avec une valeur différente de <code>none</code> ou de <code>hidden</code>.
</p>
<h3 name="Sp.C3.A9cifications"> Spécifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#border-style">CSS 1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-style-properties">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/css3-background/#border-style">CSS 3</a>
</li></ul>
<h3 name="Compatibilit.C3.A9_des_navigateurs"> Compatibilité des navigateurs </h3>
<table class="standard-table">
  <tbody><tr>
    <th>Navigateur</th>
    <th>Version minimale</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Firefox</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>3.5</td>
  </tr>
</tbody></table>
<p><br>
</p>
<h3 name="Voir_.C3.A9galement"> Voir également </h3>
<p>{{template.Cssxref("border")}}, {{template.Cssxref("border-width")}}, {{template.Cssxref("border-color")}}, {{template.Cssxref("-moz-border-radius")}}
</p><p><span class="comment">Interwiki Languages Links</span>
</p>{{ wiki.languages( { "en": "en/CSS/border-style" } ) }}
Revenir à cette révision