Border-image - CSS-Tricks | Almanah CSS 2025

border-image este o proprietate de stenogramă care vă permite să utilizați o imagine sau un gradient CSS ca chenar al unui element.

.module ( border-image: url(border.png.webp) 25 25 round; )

border-imageProprietatea poate fi aplicat la orice element, cu excepția elementelor de tabel intern (ex tr, th, td) când border-collapseeste setat la collapse.

Proprietăți

Singura proprietate necesară pentru border-imagestenografie este border-image-source. Celelalte proprietăți implicit valorile lor inițiale dacă nu sunt specificate. Acestea sunt border-imageproprietățile în ordine:

`border-image-source`

.module ( border-image-source: url(border.png.webp); )

Această proprietate specifică sursa pentru imaginea de margine. Acesta poate fi un URL, un URI de date, un gradient CSS sau un SVG inline (deși suportul este limitat pentru SVG inline, consultați notele de utilizare SVG).

Valoarea inițială este none.

`border-image-slice`

.module ( border-image-source: url(border.png.webp); border-image-slice: 20; )

Valorile acestei proprietăți indică browserului unde să „felieze” imaginea pentru a crea bucățile de chenar. Imaginea este împărțită în 9 secțiuni - cele patru colțuri, cele patru laturi și centrul.

Opt inimi într-o imagine „cadru”, mărită pentru a arăta detaliile. Liniile roșii indică felii.

Dacă credeți că sună absurd, sunteți în companie bună. A existat o discuție îndelungată despre acest subiect pe blogul lui Eric Myer în urmă cu câțiva ani, în care au participat mulți mari dezvoltatori ai frontend-ului.

În această demonstrație, o inimă se repetă în jurul graniței div. border-image-sourceImaginea este o imagine compusă din opt din icoana aceeași inimă, feliat , astfel încât forma de inima complet este folosit pe fiecare parte a elementului.

Consultați demonstrația de imagine de margine Pen: margine de pictogramă de CSS-Tricks (@ css-tricks) pe CodePen.

Mai multe note de utilizare

Deși suportul pentru border-imagea îmbunătățit - este acceptat fără prefix în toate versiunile curente ale browserului - setarea unui borderstil de rezervă este totuși utilă. Bordura dvs. de rezervă va fi afișată în browserele care nu acceptă border-imagesau dacă imaginea nu se încarcă.

Spre deosebire de alte proprietăți ale chenarului, border-imagenu poate fi animat. De asemenea, nu poate fi coafat border-radius.

Dacă declarați o border-image-sourceși o borderlățime sau border-image-widthfără felii, întreaga imagine fără licență va fi plasată la cele patru colțuri ale elementului, scalate la lățimea specificată.

Legate de

border
border-collapse
box-sizing

Mai multe informatii

border-image în modulul CSS Background and Borders, nivelul 3 CR
border-image la MDN
border-image.com, acest instrument vă permite să încărcați o imagine și să vă jucați cu feliile de margine până când le faceți corect, apoi vă generează CSS.
Imagine de frontieră explicată de la Dudley Storey.

Mai multe demonstrații

De asemenea, de la Dudley Storey, Imagine de frontieră practică: cadru de imagine receptiv, o demonstrație CodePen. Acesta este un bun exemplu de utilizare sensibilă a unei imagini de margine pe o imagine receptivă. Observați că „cadrul” este eliminat la dimensiuni de ecran mai mici.
Adevărate margini punctate folosind SVG și border-image, un stilou de Lucas Lemonnier. O soluție pentru marginea pătrată urâtă „punctată”, această metodă vă oferă adevărate puncte rotunde!
buton de gradient, un stilou de către utilizatorul CodePen GSSxGSS. Un exemplu frumos de gradient liniar ca imagine de margine.
Film Strip, un stilou de Nick Pettit. Poate că nu este cea mai practică demonstrație, acesta este un exemplu distractiv și artistic al ceea ce puteți face cu border-image.

Suport pentru browser

border-imagesolicitau inițial prefixele furnizorului pe toate browserele care îl suportau. Acum funcționează fără prefix în cea mai recentă versiune a tuturor browserelor. Acest tabel prezintă atât cel mai vechi suport prefixat, cât și cel mai vechi suport neprefixat, acolo unde este cazul.