Gränsbild - CSS-tricks | CSS Almanack 2025

border-image är en stenografisk egenskap som låter dig använda en bild eller CSS-gradient som gränsen för ett element.

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

Den border-imageegenskap kan tillämpas på alla element, utom interna tabellelement (t ex tr, th, td) då border-collapseär inställd på collapse.

Egenskaper

Den enda nödvändiga egenskapen för border-imagestenografi är border-image-source. De andra egenskaperna har som standard sina ursprungliga värden om de inte anges. Dessa är border-imageegenskaperna i ordning:

`border-image-source`

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

Den här egenskapen anger källan för gränsbilden. Detta kan vara en URL, data URI, CSS-gradient eller inline SVG (även om support är begränsat för inline SVG, se SVG-användningsanmärkningar).

Det ursprungliga värdet är none.

`border-image-slice`

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

Värdena för den här egenskapen berättar för webbläsaren var bilden ska "skivas" för att skapa delar av gränsen. Bilden är uppdelad i 9 sektioner - de fyra hörnen, de fyra sidorna och mitten.

Åtta hjärtan i en "ram" -bild, förstorad för att visa detaljer. De röda linjerna indikerar skivor.

Om du tycker att det låter oroligt är du i gott sällskap. Det fanns en lång diskussion om ämnet på Eric Myers blogg för några år sedan där många frontend-utvecklingsstorheter vägde in.

I denna demo upprepas ett hjärta runt divens gräns. Den border-image-sourcebild är en sammansatt bild av åtta av samma hjärta ikon, skivas så att hela hjärtformen används på varje sida av elementet.

Se Pen-gränsbild-demo: ikongräns av CSS-Tricks (@ css-tricks) på CodePen.

Fler användningsanmärkningar

Även om stöd för border-imagehar förbättrats - det stöds unprefixed i alla nuvarande webbläsarversioner - borderär det fortfarande värt att ställa in en reservstil . Din reservgräns visas i webbläsare som inte stöder border-image, eller om bilden inte laddas.

Till skillnad från några av de andra gränsegenskaperna border-imagekan de inte animeras. Det kan inte heller utformas med border-radius.

Om du förklarar a border-image-sourceoch en borderbredd eller border-image-widthutan några skivor placeras hela den oskivade bilden i elementets fyra hörn, skalad till din angivna bredd.

Relaterad

border
border-collapse
box-sizing

Mer information

border-image i CSS Background and Borders Module nivå 3 CR
border-image vid MDN
border-image.com, det här verktyget låter dig ladda upp en bild och spela med gränsskivorna tills du får rätt, sedan genererar det CSS åt dig.
Gränsbild förklaras från Dudley Storey.

Fler demonstrationer

Även från Dudley Storey, Praktisk border-image: responsiv bildram, en CodePen-demo. Detta är ett bra exempel på att använda en gränsbild på ett förnuftigt sätt på en responsiv bild. Observera att "ramen" tas bort i mindre skärmstorlekar.
Sanna prickade gränser med SVG och gränsbild, en penna av Lucas Lemonnier. En lösning för den fula fyrkantiga "prickade" gränsen, den här metoden ger dig riktiga runda prickar!
lutningsknapp, en penna av CodePen-användare GSSxGSS. Ett vackert exempel på en linjär lutning som en gränsbild.
Film Strip, en penna av Nick Pettit. Kanske inte den mest praktiska demo, det här är ett roligt, konstigt exempel på vad du kan göra med border-image.

Webbläsarstöd

border-imageursprungligen krävde leverantörsprefix i alla webbläsare som stödde det. Nu fungerar det utan prefix i den senaste versionen av alla webbläsare. Den här tabellen visar både det tidigaste prefixstödet och det tidigaste oprefixerade stödet där det är tillämpligt.