CSS border-image

border-image :

Border-image özelliği bir elementin borderlarına resim ataması özelliğini kullanmamızı sağlar.

Not: border-color özelliğinden önce border-style özelliğinin tanımlanmış olması gerekir.

Örnek

#borderimage1{
   -webkit-border-image: url(http://w3tr.com/file/border.png) 50 round;
    -o-border-image: url(http://w3tr.com/file/border.png) 50 round; 
    border-image: url(http://w3tr.com/file/border.png) 50 round;
}
#borderimage2{
  -webkit-border-image: url(http://w3tr.com/file/border2.png) 50 round;
   -o-border-image: url(http://w3tr.com/file/border2.png) 50 round; 
   border-image: url(http://w3tr.com/file/border2.png) 50 round;
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
border-image-source Görüntünün yolunu belirtmek için kullanılır.
border-image-slice border bölümlerinin sınırlarını gösterir.
border-image-width border a verilen resmi genişliğini belirlememize olanak sağlar.
border-image-outset Belirlenen sınırın dışına, ötesine uzamasını sağlar.
border-image-repeat Verilen görüntünün kapladığı miktar boyunca tekrar etmesini sağlar.
İnital
İnherit

Tarayıcı Desteği

16.0
4.0-webkit
15.0
3.5-moz
11.0 6.0
3.1-webkit
15.0
11.0 -o