border-image

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

Contenu de la révision

{{ CSSRef() }}

En cours de rédaction !

Présentation

La propriété CSS border-image permet de déclarer une image en lieu et place de border-style. Dans ce cas, l'image définie est découpée et étirée le long de la bordure de l'élément. À noter que cette propriété n'affecte pas la présentation de l'élément ou son contenu. Si la valeur est nulle ou si l'image ne ​​peut pas être affichée, notamment à cause de la non-implémentation de la propriété par le navigateur, les styles de bordure définis, comme border, seront utilisées.

Cette propriété permet d'élaborer des widgets 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.

  • {{ 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: <'border-image-source'> || 
               <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || 
               <'border-image-repeat'>

Valeurs

Voire les propriétés respectives pour les différentes valeurs :

Exemples

Faire des exemples !

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") }} : version 12.0.
Support natif : version 15.

{{ property_prefix("-webkit") }} : ??
Support natif : version 20.

Non supporté.
Support prévu : version 10.

{{ property_prefix("-o") }} : version 12.

{{ property_prefix("-webkit") }} : version 5.1.
Support natif : version 6.

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

{{ property_prefix("-moz") }} : version 15.

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

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

Non supporté.

{{ property_prefix("-o") }} : version 11.5.

{{ languages( { "en": "en/CSS/border-image", "zh-tw": "zh_tw/CSS/-moz-border-image" } ) }}

Source de la révision

<p>{{ CSSRef() }}</p>
<div class="warning">
  En cours de rédaction !</div>
<h2 id="Pr.C3.A9sentation">Présentation</h2>
<p>La propriété CSS <code>border-image</code> permet de déclarer une image en lieu et place de <a href="/fr/docs/CSS/border-style" title="/fr/docs/CSS/border-style"><code>border-style</code></a>. Dans ce cas, l'image définie est découpée et étirée le long de la bordure de l'élément. À noter que cette propriété n'affecte pas la présentation de l'élément ou son contenu. Si la valeur est nulle ou si l'image ne ​​peut pas être affichée, notamment à cause de la non-implémentation de la propriété par le navigateur, les styles de bordure définis, comme <a href="/fr/docs/CSS/border" title="/fr/docs/CSS/border"><code>border</code></a>, seront utilisées.</p>
<p>Cette propriété permet d'élaborer des widgets 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.</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="eval">
<em>Formal syntax: &lt;'border-image-source'&gt; || 
               &lt;'border-image-slice'&gt; [ / &lt;'border-image-width'&gt; | / &lt;'border-image-width'&gt;? / &lt;'border-image-outset'&gt; ]? || 
               &lt;'border-image-repeat'&gt;</em>
</pre>
<h3 id="Valeurs">Valeurs</h3>
<p>Voire les propriétés respectives pour les différentes valeurs :</p>
<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="Exemples">Exemples</h2>
<div class="warning">
  Faire des exemples !</div>
<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") }} : version 12.0.<br />
            Support natif : version 15.</p>
        </td>
        <td>
          <p>{{ property_prefix("-webkit") }} : ??<br />
            Support natif : version 20.</p>
        </td>
        <td>
          <p>Non supporté.<br />
            Support prévu : version 10.</p>
        </td>
        <td>
          <p>{{ property_prefix("-o") }} : version 12.</p>
        </td>
        <td>
          <p>{{ property_prefix("-webkit") }} : version 5.1.<br />
            Support natif : version 6.</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") }} : version 15.</p>
        </td>
        <td>
          <p>{{ property_prefix("-webkit") }} : version 2.1.</p>
        </td>
        <td>
          <p>{{ property_prefix("-webkit") }} : version 3.2.</p>
        </td>
        <td>
          <p>Non supporté.</p>
        </td>
        <td>
          <p>{{ property_prefix("-o") }} : version 11.5.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<p class="warning">{{ languages( { "en": "en/CSS/border-image", "zh-tw": "zh_tw/CSS/-moz-border-image" } ) }}</p>
Revenir à cette révision