border-image-source

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

Contenu de la révision

{{ CSSRef() }}

Cet article est en cours de traduction. N'hésitez pas à donner un coup de main, si l'envie vous vient.

Présentation

La propriété CSS border-image-source définit le type de donnée CSS {{ xref_cssimage() }} à utiliser à la place du style de la bordure. Si cette propriété est définie par none, c'est le style défini par {{ cssxref("border-style") }} qui sera utilisé.

À noter : si n'importe quelle {{ xref_cssimage() }} peut être utilisée avec cette propriété CSS, la compatibilité au sein des différents navigateurs est encore limité (notamment pour les fichiers SVG). Certains navigateurs ne supportent également que les images définies par la notation url().
  • {{ Xref_cssinitial() }} 1
  • 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() }} none, ou l'image avec son URI sera considérée comme absolue
  • AnimableNon

Syntaxe

Syntaxe formelle : none | <image> 
border-image-source: none                                  /* pas de border-image, border-style est utilisé à la place */
border-image-source: url(image.jpg)                        /* image.jpg est utilisé comme image */
border-image-source: linear-gradient(to top, red, yellow)  /* un gradient est utilisé comme image */

border-image-source: inherit

Exemples

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

Spécifications

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

Compatibilité entre les navigateurs

{{ CompatibilityTable() }}

Fonctionnalités Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support de base {{ CompatGeckoDesktop("15.0") }} 15.0 {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Fonctionnalités Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Support de base {{ CompatGeckoMobile("15.0") }} {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Voir aussi

Notes

Source de la révision

<p>{{ CSSRef() }}</p>
<div class="note">
  Cet article est en cours de traduction. N'hésitez pas à donner un coup de main, si l'envie vous vient.</div>
<h2 id="Pr.C3.A9sentation">Présentation</h2>
<p>La propriété CSS <code>border-image-source</code> définit le type de donnée CSS {{ xref_cssimage() }} à utiliser à la place du style de la bordure. Si cette propriété est définie par <code>none</code>, c'est le style défini par {{ cssxref("border-style") }} qui sera utilisé.</p>
<div class="note">
  <strong>À noter :</strong> si n'importe quelle {{ xref_cssimage() }} peut être utilisée avec cette propriété CSS, la compatibilité au sein des différents navigateurs est encore limité (notamment pour les fichiers SVG). Certains navigateurs ne supportent également que les images définies par la notation <code>url()</code>.</div>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> <code>1</code></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>collapse</code></li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> non</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> <code>none</code>, ou l'image avec son URI sera considérée comme absolue</li>
  <li><dfn>Animable</dfn>Non</li>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="twopartsyntaxbox">
Syntaxe formelle : none | &lt;image&gt; 
</pre>
<pre>
border-image-source: none                                  /* pas de border-image, border-style est utilisé à la place */
border-image-source: url(image.jpg)                        /* image.jpg est utilisé comme image */
border-image-source: linear-gradient(to top, red, yellow)  /* un gradient est utilisé comme image */

border-image-source: inherit
</pre>
<h2 id="Exemples">Exemples</h2>
<pre class="brush:css">
element {
  border: 1px solid black; /* obligatoire */
  border-image-source: url("image.png");
}</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">Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Backgrounds', '#border-image-source', 'border-image-source') }}</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>{{ CompatGeckoDesktop("15.0") }}</td>
        <td>15.0</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalités</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>Android</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatGeckoMobile("15.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
  <li><a href="/fr/docs/CSS/border-image" title="/fr/docs/CSS/border-image"><code>border-image</code></a> (propriété abrégée)</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>
Revenir à cette révision