mozilla

border-image

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érentes 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.

 

  • Valeur initialeborder-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é border-collapse a pour valeur collapse
  • Héritéenon
  • Mediavisuel
  • Valeur calculéechaque URI est absolue, <longueur> 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'>

Exemples

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

Spécifications

Spécifications Statut Commentaire
CSS Backgrounds and Borders Module Level 3 Candidate Recommendation  

Compatibilité entre les navigateurs

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

-moz : 12.0 (12.0)
Support natif : 15.0 (15.0)

-webkit : ?
Support natif : 20.0

Pas de support[1]

-o : 11.60
Support natif : ?[2]

-webkit : 5.1
Support natif : 6.0

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

-moz : 15.0 (15.0)

-webkit : 2.1

-webkit : 3.2

Pas de support

-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/

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : Jeremie, teoli, FredB, PetiPandaRou, openjck, mib_6025
Dernière mise à jour par : teoli,
Masquer la barre latérale