border-image-source Özelliği

border-image-source özelliği, kenarlık için görseli belirtir. Daha ayrıntılı bilgi için border-image özelliğine bakınız.

Sözdizimi

seçici {
	border-image-source: url(görselin yolu);
}

Örnek

border-image-source özelliği, border-image-slice ile birlikte belirtilmelidir:

<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;
}

Örnek

Eğer border-image-slice özelliği belirtilmezse, görselin tamamı köşelere yerleşir (çünkü border-image-slice varsayılan değeri 100% olarak ayarlanmıştır):

<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;
}

Örnek

Görsel yerine doğrusal degrade belirtilebilir:

<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;
}

Örnek

Eğer border-image-slice özelliği belirtilmezse, degrade köşelere yerleşir (çünkü border-image-slice varsayılan değeri 100% olarak ayarlanmıştır):

<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;
}

Örnek

Eğer border-radius özelliği belirtilirse, kenarlık yuvarlatılmaz (degrade durumunda da), ancak yine de oldukça ilginç bir etki ortaya çıkacaktır:

<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;
}

Ayrıca Bakınız

kenarlık görseli için kısa yol olan border-image özelliği
kenarlık görselini dilimleyen border-image-slice özelliği
kenarlık görselinin tekrarını belirleyen border-image-repeat özelliği
kenarlık görselinin boyutunu belirleyen border-image-width özelliği
kenarlık görselinin dışa kaymasını belirleyen border-image-outset özelliği