Border-image - CSS-triks | CSS-almanakk 2025

border-image er en stenografisk eiendom som lar deg bruke et bilde eller CSS-gradient som grensen til et element.

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

Den border-imageegenskap kan anvendes på et hvilket som helst element, bortsett fra interne tabellelementer (f.eks tr, th, td) når det border-collapseer satt til collapse.

Eiendommer

Den eneste nødvendige eiendommen for border-imagestenografien er border-image-source. De andre egenskapene har standardverdiene som standard hvis de ikke er spesifisert. Dette er border-imageegenskapene i rekkefølge:

`border-image-source`

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

Denne egenskapen spesifiserer kilden for kantbildet. Dette kan være en URL, data URI, CSS-gradient eller innebygd SVG (selv om støtten er begrenset for innebygd SVG, se SVG-bruksanvisninger).

Den opprinnelige verdien er none.

`border-image-slice`

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

Verdiene til denne egenskapen forteller nettleseren hvor "skjære" bildet for å lage delene av grensen. Bildet er delt inn i 9 seksjoner - de fire hjørnene, de fire sidene og midten.

Åtte hjerter i et "rammebilde", forstørret for å vise detaljer. De røde linjene indikerer skiver.

Hvis du synes det høres latterlig ut, er du i godt selskap. Det var en lang diskusjon om emnet på Eric Myers blogg for noen år siden der mange frontend-utviklingsstorer veide inn.

I denne demoen gjentar et hjerte seg rundt grensen til div. Det border-image-sourcebilde er et sammensatt bilde av åtte av de samme hjerte-ikonet, skiver slik at den fulle hjerteform benyttes på hver side av elementet.

Se Pen border demo-ikonet: icon border av CSS-Tricks (@ css-tricks) på CodePen.

Flere bruksanvisninger

Selv om støtten til border-imageer forbedret - støttes den ikke forhåndsinnstilt i alle nåværende nettleserversjoner - borderer det fortsatt verdt å sette en reservestil . Reservegrensen vises i nettlesere som ikke støtter border-image, eller hvis bildet ikke lastes inn.

I motsetning til noen av de andre grenseegenskapene, border-imagekan ikke animeres. Det kan heller ikke utformes med border-radius.

Hvis du erklærer en border-image-sourceog en borderbredde eller border-image-widthuten noen skiver, vil hele det uslissede bildet plasseres i elementets fire hjørner, skalert til din spesifiserte bredde.

I slekt

border
border-collapse
box-sizing

Mer informasjon

border-image i CSS Background and Borders Module Level 3 CR
border-image ved MDN
border-image.com, dette verktøyet lar deg laste opp et bilde og leke med grenseskivene til du får dem riktig, så genererer det CSS for deg.
Grensebilde forklart fra Dudley Storey.

Flere demonstrasjoner

Også fra Dudley Storey, Praktisk border-image: responsiv bilderamme, en CodePen-demo. Dette er et godt eksempel på å bruke et rammebilde fornuftig på et responsivt bilde. Legg merke til at "rammen" fjernes i mindre skjermstørrelser.
Ekte prikkede grenser med SVG og border-image, en penn av Lucas Lemonnier. En løsning for den stygge firkantede "prikkede" grensen, denne metoden gir deg ekte runde prikker!
gradient-knapp, en penn av CodePen-bruker GSSxGSS. Et pent eksempel på en lineær gradient som et rammebilde.
Film Strip, en penn av Nick Pettit. Kanskje ikke den mest praktiske demoen, dette er et morsomt, kunstnerisk eksempel på hva du kan gjøre med border-image.

Nettleserstøtte

border-imageopprinnelig påkrevde leverandørprefikser i alle nettlesere som støttet det. Nå fungerer den uprefiksert i den siste versjonen av alle nettlesere. Denne tabellen viser både den tidligste prefikserte støtten og den tidligste uprefiksede støtten der det er aktuelt.