A szegélyek egy-egy kép felhasználásával is megvalósíthatók.
A képes szegély beállításának szabványos alakja:
kijelölő
{
border-image
:
source
slice
/ width
/ outset
repeat;
}
- source a kép URL-je
-
slice a kép szegélyként felhasználható 4 szélének szélessége.A felső, a jobboldali, az alsó és a baloldali sávok méretét.
Ezek találkozásánál a négy sarok tartalmának helye is egyértelművé válik.
A középső területtel együtt a slice értékei 9 = 4 + 4 +1 területet határoznak meg. Megadható pixelben (px nélkül), vagy %-ban.
Különböző érték adható a 4 oldalra, vagy 2 irányra. Azonos érték használata esetén összevonható.
A fill kulcsszó megadása esetén a kép középső része is megjelenítésre kerül, felülírva a háttérképet. -
width a HTML elem képes szegélye szélességének beállítására szolgál, ami eltérhet a szegély megvalósítására használt képcsík szélességétől.
Megadható képpontban, százalékban vagy az auto kulcsszóval. Utóbbi esetben a szegély szélessége azonos lesz a kép kijelölt darabjának szélességével. A négy oldalra külön is beállítható. - outset értékével a szegély helyzete a dobozból kifelé tolható.(Safari, Opera és az IE sem támogatja.)
-
repeat E tulajdonsággal adható meg, hogy a szegélyhez használt kép egyes elemei a rendelkezésre álló területet miként töltsék ki. A vízszintes és a függőleges szegélyekre külön is megadható.
- stretch = a kép kijelölt területeit akkorára nyújtja, hogy kitöltsék a területet.
- repeat = a kép kijelölt területeit annyiszor ismétli, hogy kitöltsék a területet.
- round = a kép kijelölt területeit annyiszor ismétli, hogy kitöltsék a területet, miközben átméretezi annak érdekében, hogy mindannyiszor a teljes képterület jelenjen meg. (Ne legyenek befejezetlen motívumok.)
A képes szegély beállításának bongészőfüggetlen alakja:
kijelölő
{
border
:
width(pl. 47px)
solid
transparent;
}
kijelölő
{
border-image
:
source
slice
repeat;
}
Háttéképünk:

A gömbök átmérője 34px.
1. példa:
Forráskód
<style>
div { width: 160px; height: 105px;
border:34px solid transparent;}
#id_0 {-webkit-border-image:url(hatterkep_1.png) 34 34 stretch;
-o-border-image:url(hatterkep_1.png) 34 34 stretch;
-moz-border-image:url(hatterkep_1.png) 34 34 stretch;
border-image:url(hatterkep_1.png) 34 34 stretch;}
#id_1 {-webkit-border-image:url(hatterkep_1.png) 34 34 repeat;
-o-border-image:url(hatterkep_1.png) 34 34 repeat;
-moz-border-image:url(hatterkep_1.png) 34 34 repeat;
border-image:url(hatterkep_1.png) 34 34 repeat;}
#id_2 {-webkit-border-image:url(hatterkep_1.png) 34 34 round;
-o-border-image:url(hatterkep_1.png) 34 34 round;
-moz-border-image:url(hatterkep_1.png) 34 34 round;
border-image:url(hatterkep_1.png) 34 34 round;}
#id_3 {-webkit-border-image:url(hatterkep_1.png) 34 34 repeat stretch;
-o-border-image:url(hatterkep_1.png) 34 34 repeat repeat stretch;
-moz-border-image:url(hatterkep_1.png) 34 34 repeat stretch;
border-image:url(hatterkep_1.png) 34 34 repeat stretch;}
</style>
...
<body>
<div id="id_0">stretch </div>
<div id="id_1">repeat</div>
<div id="id_2">round</div>
<div id="id_3">repeat stretch</div>
</body>
Eredmény*
2. példa:
Forráskód
<style>
div { width: 160px; height: 105px;
border:34px solid transparent;}
#id_0 {-webkit-border-image:url(hatterkep_1.png) 34 34 / 17px 17px stretch;
-o-border-image:url(hatterkep_1.png) 34 34 / 17px 17px stretch;
-moz-border-image:url(hatterkep_1.png) 34 34 / 17px 17px stretch;
border-image:url(hatterkep_1.png) / 17px 17px stretch;}
#id_1 {-webkit-border-image:url(hatterkep_1.png) 34 34 / 17px 17px / 0.5 1 stretch;
-o-border-image:url(hatterkep_1.png) 34 34 / 17px 17px stretch;
-moz-border-image:url(hatterkep_1.png) 34 34 / 17px 17px / 0.5 1 stretch;
border-image:url(hatterkep_1.png) / 17px 17px / 0.5 1 stretch;}
</style>
...
<body>
<div id="id_0">stretch </div>
<div id="id_1">repeat</div>
</body>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_szegely_kepes_1.html