border-image-repeat Özelliği

border-image-repeat özelliği, resim olarak belirlenen kenarlığın iç kısmının nasıl tekrarlanacağını belirler. Daha detaylı bilgi için border-image özelliğine bakınız.

Sözdizimi

seçici {
	border-image-repeat: stretch | repeat | round;
}

Değerler

Değer	Açıklama
`stretch`	Kenarlık resmini elementin boyutlarına kadar uzatır. Bu varsayılan değerdir.
`repeat`	Kenarlık resmini tekrarlar.
`round`	Resmi tekrarlar ve elementin kenarında tam sayıda resim olacak şekilde ölçeklendirir.

Varsayılan değer: stretch.

Parametre Sayısı

1 veya 2 parametre alabilir. Eğer iki parametre belirtilirse, birincisi üst ve alt kenarlık için, ikincisi ise sol ve sağ kenarlık için uygulanır.

Örnek . stretch Değeri

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Örnek . repeat Değeri

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Örnek . round Değeri

Şu anda normal durumda repeat değeri, üzerine gelindiğinde ise round değeri ayarlanmıştır. Üzerine gelinmeden önce kenarlığa tam sayıda elmas sığmadığına, üzerine gelindiğinde ise tam sayıda sığdığına dikkat edin. round bu şekilde çalışır:

<div id="elem"></div>

#elem:hover {
	border-image-repeat: round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Örnek . İki Değer

Genişlik için repeat, yükseklik için stretch değeri:

<div id="elem"></div>

#elem {
	border-image-repeat: repeat stretch;
	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 resmi için kısa yol olan border-image özelliği
kenarlık için resim yolunu belirleyen border-image-source özelliği
kenarlık resmini bölümleyen border-image-slice özelliği
kenarlık resminin boyutunu belirleyen border-image-width özelliği
kenarlık resminin kaydırmasını belirleyen border-image-outset özelliği