border-image

  • Raccourci de la révision : CSS/border-image
  • Titre de la révision : border-image
  • ID de la révision : 433587
  • Créé :
  • Créateur : GiulianT
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Cet article est en cours de rédaction. Si vous désirez le continuer, il manque des exemples de code (avec images). Il faudrait également tester la compatibilité de cette fonctionnalité et de ces attributs sur plusieurs navigateurs, de manière à améliorer la table de compatibilité (avec sources).

Présentation

La propriété CSS border-image permet de déclarer une image sur les bords d'un élément. Cette propriété permet d'élaborer des widgets complexes de manière beaucoup plus simple, en supprimant le fait de devoir déclarer neuf boîtes différents pour intégrer des designs particuliers pour chaque coin et chaque bordure.

border-image est utilisée en lieu et place de border-style. Il est important de noter que si la valeur calculée de border-image-source, qui peut être définie à la fois par border-image-source ou par le raccourci border-image, est nulle, ou si l'image ne peut pas être affichée, les styles de bordures seront utilisés. C'est également le cas si la propriété n'est pas implémentée par le navigateur.

 

  • {{ Xref_cssinitial() }}border-image est une propriété abrégée; donc techniquement, elle ne possède pas de valeur par défaut. Toutefois, les valeurs qu'elle permet de raccourcir en possède :
    • border-image-source: none
    • border-image-slice: 100%
    • border-image-width: 1
    • border-image-outset: 0
    • border-image-repeat: stretch
  • S'applique àtous les éléments, excepté les éléments de type table quand la propriété {{ cssxref("border-collapse") }} a pour valeur collapse
  • {{ Xref_cssinherited() }}non
  • Media{{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}chaque URI est absolue, {{ Xref_csslength() }} est absolu, les autres parties sont spécifiques

Syntaxe

Formal syntax: {{csssyntax("border-image")}

Exemples

element {
  border: 1px solid black; /* obligatoire */
  border-image: url("image.png") 42 round stretch;
}

Spécifications

Spécifications Status Commentaires
{{ SpecName('CSS3 Backgrounds', '#border-image', 'border-image') }} {{ Spec2('CSS3 Backgrounds') }}  

Compatibilité entre les navigateurs

{{ CompatibilityTable() }}

Fonctionnalités Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support de base

{{ property_prefix("-moz") }} : {{ CompatGeckoDesktop("12.0") }}
Support natif : {{ CompatGeckoDesktop("15.0") }}

{{ property_prefix("-webkit") }} : {{ CompatUnknown() }}
Support natif : 20.0

{{ CompatNo }}[1]

{{ property_prefix("-o") }} : 11.60
Support natif : {{ CompatUnknown() }}[2]

{{ property_prefix("-webkit") }} : 5.1
Support natif : 6.0

Fonctionnalités Firefox for Android Android Browser iOS Safari Opera Mini Opera Mobile
Support de base

{{ property_prefix("-moz") }} : {{ CompatGeckoMobile("15.0") }}

{{ property_prefix("-webkit") }} : 2.1

{{ property_prefix("-webkit") }} : 3.2

{{ CompatNo }}

{{ property_prefix("-o") }} : 11.1[2]

Voir aussi

Notes

  1. http://msdn.microsoft.com/en-us/library/hh781508%28v=vs.85%29.aspx
  2. http://www.opera.com/docs/specs/productspecs/

Source de la révision

<p>{{ CSSRef() }}</p>
<div class="note">
  <p>Cet article est en cours de rédaction. Si vous désirez le continuer, il manque des <strong>exemples de code (avec images)</strong>. Il faudrait également <strong>tester la compatibilité</strong> de cette fonctionnalité et de ces attributs sur plusieurs navigateurs, de manière à améliorer la table de compatibilité (avec sources).</p>
</div>
<h2 id="Pr.C3.A9sentation">Présentation</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>border-image</code> permet de déclarer une image sur les bords d'un élément. Cette propriété permet d'élaborer des widgets complexes de manière beaucoup plus simple, en supprimant le fait de devoir déclarer neuf boîtes différents pour intégrer des designs particuliers pour chaque coin et chaque bordure.</p>
<p><code>border-image</code> est utilisée en lieu et place de <a href="/fr/docs/CSS/border-style" title="/fr/docs/CSS/border-style"><code>border-style</code></a>. Il est important de noter que si la valeur calculée de <code>border-image-source</code>, qui peut être définie à la fois par <code>border-image-source</code> ou par le raccourci <code>border-image</code>, est nulle, ou si l'image ne peut pas être affichée, les styles de bordures seront utilisés. C'est également le cas si la propriété n'est pas implémentée par le navigateur.</p>
<p>&nbsp;</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn><code>border-image</code> est une propriété abrégée; donc techniquement, elle ne possède pas de valeur par défaut. Toutefois, les valeurs qu'elle permet de raccourcir en possède :
    <ul>
      <li><code>border-image-source: none</code></li>
      <li><code>border-image-slice: 100%</code></li>
      <li><code>border-image-width: 1</code></li>
      <li><code>border-image-outset: 0</code></li>
      <li><code>border-image-repeat: stretch</code></li>
    </ul>
  </li>
  <li><dfn>S'applique à</dfn>tous les éléments, excepté les éléments de type table quand la propriété {{ cssxref("border-collapse") }} a pour valeur <code class="css">collapse</code></li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn>non</li>
  <li><dfn>Media</dfn>{{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn>chaque URI est absolue, {{ Xref_csslength() }} est absolu, les autres parties sont spécifiques</li>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("border-image")}</pre>
<h2 id="Exemples">Exemples</h2>
<pre class="brush:css">
element {
  border: 1px solid black; /* obligatoire */
  border-image: url("image.png") 42 round stretch;
}</pre>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécifications</th>
      <th scope="col">Status</th>
      <th scope="col">Commentaires</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Backgrounds', '#border-image', 'border-image') }}</td>
      <td>{{ Spec2('CSS3 Backgrounds') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_entre_les_navigateurs">Compatibilité entre les navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalités</th>
        <th>Firefox (Gecko)</th>
        <th>Chrome</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>
          <p>{{ property_prefix("-moz") }} : {{ CompatGeckoDesktop("12.0") }}<br />
            Support natif : {{ CompatGeckoDesktop("15.0") }}</p>
        </td>
        <td>
          <p>{{ property_prefix("-webkit") }} : {{ CompatUnknown() }}<br />
            Support natif : 20.0</p>
        </td>
        <td>
          <p>{{ CompatNo }}<a href="note1">[1]</a></p>
        </td>
        <td>
          <p>{{ property_prefix("-o") }} : 11.60<br />
            Support natif : {{ CompatUnknown() }}<a href="#note2">[2]</a></p>
        </td>
        <td>
          <p>{{ property_prefix("-webkit") }} : 5.1<br />
            Support natif : 6.0</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalités</th>
        <th>Firefox for Android</th>
        <th>Android Browser</th>
        <th>iOS Safari</th>
        <th>Opera Mini</th>
        <th>Opera Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>
          <p>{{ property_prefix("-moz") }} : {{ CompatGeckoMobile("15.0") }}</p>
        </td>
        <td>
          <p>{{ property_prefix("-webkit") }} : 2.1</p>
        </td>
        <td>
          <p>{{ property_prefix("-webkit") }} : 3.2</p>
        </td>
        <td>
          <p>{{ CompatNo }}</p>
        </td>
        <td>
          <p>{{ property_prefix("-o") }} : 11.1<a href="#note2">[2]</a></p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
  <li><a href="/fr/docs/CSS/border-image-source" title="/fr/docs/CSS/border-image-source"><code>border-image-source</code></a></li>
  <li><a href="/fr/docs/CSS/border-image-slice" title="/fr/docs/CSS/border-image-slice"><code>border-image-slice</code></a></li>
  <li><a href="/fr/docs/CSS/border-image-width" title="/fr/docs/CSS/border-image-width"><code>border-image-width</code></a></li>
  <li><a href="/fr/docs/CSS/border-image-outset" title="/fr/docs/CSS/border-image-outset"><code>border-image-outset</code></a></li>
  <li><a href="/fr/docs/CSS/border-image-repeat" title="/fr/docs/CSS/border-image-repeat"><code>border-image-repeat</code></a></li>
</ul>
<h2 id="Notes">Notes</h2>
<ol>
  <li><a id="note1">http://msdn.microsoft.com/en-us/library/hh781508%28v=vs.85%29.aspx</a></li>
  <li><a id="note2">http://www.opera.com/docs/specs/productspecs/</a></li>
</ol>
Revenir à cette révision