CSS border-image Özelliği

CSS border-image

Css border-image özelliğini kullanarak html elemanlarının kenarlarına resim atayarak daha güzel tasarım ve sonuçlar elde edilebilir.

Örnek:

Bu örnekte border-image özelliğini 4 tane paragraf elemanına uygulanacaktır.

#kenarresim1 { border: 10px solid transparent; padding: 13px; -webkit-border-image: url(border.png) 28 round; /* Safari 3.1-5 */ -o-border-image: url(border.png) 28 round; /* Opera 11-12.1 */ border-image: url(border.png) 28 round; }

CSS border-image nedir nasıl kullanılır

CSS border-image	CSS border-image özellikleri
Varsayılan Değer:	none 100% 1 0 stretch
Kalıtsallık:	yok
Animasyon Özelliği:	yok
Versiyon:	CSS3
JavaScript border-image:	object.style.borderImage="url(border.png) 28 round"

CSS border-image Tarayıcı Desteği

CSS Kodu:
border-image	16.0 4.0 -webkit-	11.0	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11.0 -o-

CSS border-image Değerleri

border-image:source slice width outset repeat|initial|inherit;

CSS border-image özelliği değerleri

CSS border-image değerleri	CSS border-image değerleri tanımları	CSS örnek uygulamalar
border-image-source	Kenarlık olarak kullanılacak resmin adresi girilir.
border-image-slice	kenarlık olarak kullanılan resmin dilim sayısıdır.
border-image-width	Kenarlık olarak kullanılcak resmin genişliğidir.
border-image-outset	Kenarlık resminin uygulanacak elemandan ne kadar dışarısında kalacağını gösteren değerdir.
border-image-repeat	Resmin rekrar edip etmeyeceği belirtilir.
initial	Özelliğin başlangıç değeridir.
inherit	Soy bağından gelen değeridir.