Egenskapen border-image-source
Egenskapen border-image-source angir
bildet for kanten. For mer detaljert
informasjon se egenskapen border-image.
Syntaks
velger {
border-image-source: url(sti til bilde);
}
Eksempel
Egenskapen border-image-source bør
angis sammen med border-image-slice:
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Eksempel
Hvis egenskapen border-image-slice ikke er angitt,
vil hele bildet havne på hjørnene (fordi border-image-slice
som standard har verdien 100%):
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Eksempel
I stedet for et bilde kan du angi en lineær gradient:
<div id="elem"></div>
#elem {
border-image-source: linear-gradient(to bottom, red, blue);
border-image-slice: 30;
border-width: 30px;
border-style: solid;
background: green;
height: 200px;
width: 200px;
margin: 0 auto;
}
:
Eksempel
Hvis egenskapen border-image-slice ikke er angitt,
vil gradienten havne på hjørnene (fordi border-image-slice
som standard har verdien 100%):
<div id="elem"></div>
#elem {
border-image-source: linear-gradient(to bottom, red, blue);
border-width: 30px;
border-style: solid;
background: green;
height: 200px;
width: 200px;
margin: 0 auto;
}
:
Eksempel
Hvis du angir egenskapen border-radius,
vil det dessverre ikke skje noen avrunding av kanten
(også med gradient), selv om effekten
også vil være ganske interessant:
<div id="elem"></div>
#elem {
border-radius: 100px;
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Se også
-
egenskapen
border-image,
som er en forkortelse for kantbilde -
egenskapen
border-image-slice,
som deler bildet for kanten -
egenskapen
border-image-repeat,
som gjentar bildet for kanten -
egenskapen
border-image-width,
som angir størrelsen på bildet for kanten -
egenskapen
border-image-outset,
som angir forskyvningen av bildet for kanten