MEMBUAT BORDER IMAGE DENGAN CSS3

Dengan menggunakan property Border-Image CSS3, anda dapat menggunakan sebuah image / gambar untuk membuat sebuah border. Berikut adalah cara membuat border image dengan CSS3.



Dengan menggunakan image / gambar di bawah ini,


akan memperoleh hasil seperti :

Ini adalah border image yang diulang (repeat)

atau seperti ini

Ini adalah border image meregang (stretch)

Di bawah ini adalah code script CSS3

<style type="text/css">

div
{
border-width:15px;
width:250px;
padding:10px 20px;
}

.ulang
{
-moz-border-image:url(http://i1234.photobucket.com/albums/ff405/hendrik2011/border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(http://i1234.photobucket.com/albums/ff405/hendrik2011/border.png) 30 30 round; /* Safari and Chrome */
border-image:url(border.png) 30 30 round;
}
.meregang
{
-moz-border-image:url(http://i1234.photobucket.com/albums/ff405/hendrik2011/border.png) 30 30 stretch; /* Firefox */
-webkit-border-image:url(http://i1234.photobucket.com/albums/ff405/hendrik2011/border.png) 30 30 stretch; /* Safari and Chrome */
border-image:url(border.png) 30 30 stretch;
}
</style>
<div class="ulang">
Ini adalah border image yang diulang (repeat)</div>

Selamat mencoba...

Posted in: border image,CSS3