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

See the Pen <a href="http://codepen.io/w3tr/pen/Vvqrod/">border-image</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>.

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

W3TR

HTML, CSS