10/17/2016 borderimage|CodropsCSSReference

Codrops

CSS Reference
P ROP E RTY
borderimage
e.g.maskimage
Seealso bordercolor borderimageoutset borderstyle
borderimagerepeat

Theborderimagepropertyisusedto
defineanimagetobeusedinsteadof
theborderstylesgivenbytheborder
stylepropertiesandasanadditional
backgroundlayerfortheelement.

Itisashorthandpropertyusedtosetthelonghandproperties
borderimagesource,borderimageslice,borderimage
width,borderimageoutset,andborderimagerepeat.

Foradetaileddescriptionofwhateachpropertydoes,pleasereferto
thepropertysentry.

Whenaborderimageistobesetonanelement,itissetinseveral
steps.

http://tympanus.net/codrops/css_reference/borderimage 1/12
10/17/2016 borderimage|CodropsCSSReference

First,theimagespecifiedintheborderimagesourcepropertyis
slicedintonineimagesfourcornerimages,fouredgeimages,and
onemiddleimageusingtheborderimagesliceproperty.

Theborderimageslicedintonineimages.Thesizeofeachof
theseimagesisdeterminedbythevaluesgivenbytheborder
imagesliceproperty.Theydonthavetobeequalinsize.

Theresultingnineimagesarethenscaled,positioned,andtiledinto
theircorrespondingborderimageregionsinthefollowingsteps:

1. Theimagesarescaledaccordingtothevaluespecified
usingtheborderimagewidthproperty.
Thetopandbottomedgeimagesarescaledverticallytofit
thecorrespondingspecifiedwidthoffsets.
Therightandbottomleftarescaledverticallytofitthe
correspondingspecifiedrightandleftwidthoffsets.

http://tympanus.net/codrops/css_reference/borderimage 2/12
10/17/2016 borderimage|CodropsCSSReference

Thecornerimagesarescaledtofitthewidthspecifiedonthe
edgesthattheyareapartof.
Andthemiddleimageswidthisscaledbythesamefactoras
thetopimageunlessthatfactoriszeroorinfinity,inwhich
casethescalingfactorofthebottomissubstituted,and
failingthat,thewidthisnotscaled.Theheightofthemiddle
imageisscaledbythesamefactorastheleftimageunless
thatfactoriszeroorinfinity,inwhichcasethescalingfactor
oftherightimageissubstituted,andfailingthat,theheightis
notscaled.

2. Theimagesarescaledaccordingtothevaluespecified
usingtheborderimagerepeatproperty.
Ifthefirstkeywordoftheborderimagerepeatpropertyis
stretch,thetopandbottomedgeimagesandthemiddle
imagearestretchedtofitthewidthoftheborderimagearea.
Theirheightisnotscaled.
Ifthefirstkeywordisround,thetop,middleandbottom
imagesareresizedinwidth,sothatexactlyawholenumber
ofthemfitinthemiddlepartoftheborderimagearea.
Ifthefirstkeywordisrepeatorspace,thetop,middle,and
bottomimagesarenotscaledanymore,sotheirheightwould
onlybescaledfromthefirststepabove.
Ifthesecondkeywordisstretch,round,repeat,or
space,thesamescalingisappliedtotherespectiveleft,
middle,andrightimages,affectingtheheightoftheimages
theirwidthisnotscaledexceptfromthefirststep.

3. Nowthattheimagesarescaled,theyarepositioned.
Positioningtheimagesisalsorelatedtotheborderimage
repeatproperty.
Ifthefirstkeywordisrepeat,thetop,middle,andbottom
imagesarecenteredhorizontallyintheirrespectiveareas.
Otherwisetheimagesareplacedattheleftedgeoftheir
respectivepartsoftheborderimagearea.
Ifthesecondkeywordisrepeat,theleft,middle,andright
imagesarecenteredverticallyintheirrespectiveareas.

http://tympanus.net/codrops/css_reference/borderimage 3/12
10/17/2016 borderimage|CodropsCSSReference

Otherwisetheimagesareplacedatthetopedgeoftheir
respectivepartsoftheborderimagearea.

4. Aftertheimageshavebeenscaledandpositioned,theyare
tiled(repeated)asmanytimesasnecessarydepending
onthevalueoftheborderimagerepeatproperty,tofill
theirrespectiveareas.
Ifthevalueisrepeat,theimagesarerepeatedasmuchas
necessarytofilltheirrespectiveareas.Ifthevalueisspace,
anypartialtilesarediscardedandtheextraspaceis
distributedbefore,after,andbetweenthetiles.(I.e.thegap
beforethefirsttile,thegapafterthelasttile,andthegaps
betweentilesareequalized.)
Allimagesaredrawnatthesamestackinglevelasnormal
borders:immediatelyinfrontofthebackgroundlayersso,a
borderimagewillalwaysbeontopofanybackground
images.

Theborderimagecanbeextendedoutsidetheborderareaofthe
elementusingtheborderimageoutsetproperty.Refertothe
propertysentryfordetails.

Theresultoftheabovestepscanbebestunderstoodwhenseen
visually.Soitisbestifyouuseaninteractivetooltoseehowthe
differentvalueschangetherenderingoftheborderimage.The
followingaretwogreattoolstodojustthat:

BorderImageGeneratorInteractiveDemoandToolbyKevin
Decker

GrokkingCSS3borderimageInteractiveDemobyNoraBrown

OfficialSyntax

Syntax:

http://tympanus.net/codrops/css_reference/borderimage 4/12
10/17/2016 borderimage|CodropsCSSReference

borderimage:<'borderimagesource'>||<'borderimageslice'

Initial:
none100%/1/0stretch,whichistheconcatenationof
theinitialvaluesofthelonghandproperties

AppliesTo:Allelements,exceptinternaltableelementswhen
bordercollapseiscollapse

Animatable:no

Notes

Omittedvaluesfromtheshorthanddeclartionaresettotheirdefault
values.

Values

<borderimagesource>

Seetheborderimagesourcepropertyentryforalistof
possiblevalues.

<borderimageslice>

Seetheborderimageslicepropertyentryforalistof
possiblevalues.

http://tympanus.net/codrops/css_reference/borderimage 5/12
10/17/2016 borderimage|CodropsCSSReference

<borderimagewidth>

Seetheborderimagewidthpropertyentryforalistof
possiblevalues.

<borderimageoutset>

Seetheborderimageoutsetpropertyentryforalistof
possiblevalues.

<borderimagerepeat>

Seetheborderimagerepeatpropertyentryforalistof
possiblevalues.

Examples
Thefollowingsetsaborderimageonanelement.

.element{
borderimage:url(path/to/image.png)25402540/30403040/
}

Alotofauthorstendtonotsettheoutsetandkeeptheslicesizeand
widththesame,soalotofborderimagedeclarationswouldlook
likethefollowing:

http://tympanus.net/codrops/css_reference/borderimage 6/12
10/17/2016 borderimage|CodropsCSSReference

.element{
url("border.png")27roundstretch;
}

Thefollowingtwoexamplesareborrowedfromthespecification.

Thisexamplecreatesatopandbottomborderconsistingofawhole
numberoforangediamondsandaleftandrightborderofasingle,
stretcheddiamond.Thecornersarediamondsofadifferentcolor.
Theimagetotileisasfollows.Apartfromthediamonds,itis
transparent:

Theimageis81by81pixelsandhastobedividedinto9equalparts.
Thestylerulescouldthusbeasfollows:

.element{
border:doubleorange1em;
borderimage:url("border.png")27roundstretch;
}

Theresult,whenappliedtoanelementof12by5em,willbesimilarto
this:

Thisshowsamorecomplicatedexample,demonstratinghowthe
borderimagecorrespondstothefallbackborderstylebutcanalso
extendbeyondtheborderarea.Theborderimageisawavygreen
borderwithanextendedcornereffect.Thefollowingistheborder
http://tympanus.net/codrops/css_reference/borderimage 7/12
10/17/2016 borderimage|CodropsCSSReference

imagesourceimage,withthefourborderimageslicecutsat
124pxdividingtheimageintonineparts.

Theborderimagesourceimage,withthefourborderimage
slicecutsat124pxdividingtheimageintonineparts.

Therestoftheborderpropertiestheninteracttolayoutthetilesas
follows:

http://tympanus.net/codrops/css_reference/borderimage 8/12
10/17/2016 borderimage|CodropsCSSReference

Diagramofallborderimagepropertiesandhowtheyinteract,
andshowingtherenderingwithandwithouttheborderimagein
effect.

Here,eventhoughtheborderwidthis12px,theborderimage
widthpropertycomputesto124px.Theborderimageareaisthen
outset31pxfromtheborderboxandintothemarginarea.Ifthe
borderimagefailstoload(orborderimagesarenotsupportedbythe
browser),thefallbackrenderingusesagreendoubleborder.

LiveDemo
http://tympanus.net/codrops/css_reference/borderimage 9/12
10/17/2016 borderimage|CodropsCSSReference

Playwiththevaluesoftheborderimagepropertyinthefollowing
demotoseehowthatchangestheresultofthefollowingborder
image.

HTML CSS Result

element1

Loremipsum
dolorsitamet,
consectetur
adipisicingelit.
Veniam,optio,
repellendus,
quod,incidunt
nullaiusto
quamsunt
sequiporro
repudiandae
consectetur
veritatis
consequuntur
namrepellat
quae
temporibus
laboriosam
officiamodi.

BrowserSupport

http://tympanus.net/codrops/css_reference/borderimage 10/12
10/17/2016 borderimage|CodropsCSSReference

CSS3 Border images - CR

Android Browser
Global usage 16.25% + 74.04% = 90.29%

Opera Mobile
iOS Safari

Blackberry Browser
Chrome
Firefox

Opera
Safari

Chrome for Android

Firefox for Android

IE

Edge

IE Mobile
8 46 50 8 37 8.1-8.4
4.2-4.3
11.5

Opera Mini
9 12 47 51 9 38 9.0-9.24.4 12
10 13 48 52 9.139 9.3 4.4.3-4.4.4
7 12.1 10
11 14 49 53 10 40 10 all 52 10 37 53 49 11 11
50 54 TP 41
51 55 42
52 56
Note that both the borderstyle and
borderwidth must be speci ed (not set
to none or 0) for border-images to work.

FurtherReading

CSSBackgroundsandBordersModuleLevel3

BorderImageExplainedbyDudleyStorey

BorderImageGeneratorInteractiveDemoandTool

GrokkingCSS3borderimageInteractiveDemo

RelatedEntries

bordercolor

borderimageoutset

borderstyle

borderimagerepeat

http://tympanus.net/codrops/css_reference/borderimage 11/12
10/17/2016 borderimage|CodropsCSSReference

Back

Lastupdated:February4,2015at2:32pm

Doyouhaveasuggestion,questionorwanttocontribute?Submitan

issue.

http://tympanus.net/codrops/css_reference/borderimage 12/12