Border-image: Gunakan Image Buat Bordermu

Border-image: using images for your border

Fitur menarik lain dari border CSS3 yang baru adalah properti border-image. Dengan fitur ini Anda dapat menentukan gambar yang akan digunakan sebagai pengganti border normal dari suatu elemen. Fitur ini sebenarnya terbagi menjadi beberapa properti: border-image dan border-corner-image. Inilah detail dari kedua value tersebut:


border-image:

• border-top-image
  
• border-right-image
  
• border-bottom-image
  
• border-left-image

border-corner-image:

• border-top-left-image
  
• border-top-right-image
  
• border-bottom-left-image
  
• border-bottom-right-image

border-image baru bisa bekerja di Safari, chrome dan Firefox 3.1 (Alpha). Sintaks untuk menggunakannya adalah:

border-image: url(border.png) 27 27 27 27 round round;

dan hasilnya adalah :

Lorem ipsum dolor sit amet.

atau yang ini :

border-image: url(border.png) 27 27 27 27 stretch stretch;

Dan hasilnya adalah :

Lorem ipsum dolor sit amet.

Semakin terlihat menarik bukan. Nah berikut ini adalah screenshot-nya buat yang browsernya belom suport.

• Yang pertama.
  
  
  
  
  
• Yang kedua.
  
  
  

Script yang kupake

Spoiler for ngintip:

margin: 0 30px;
width: 270px;
padding: 14px;
-o-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYeyMCBpE6XVYTWIkw42Uy2BPK4oxQkvL01t2XLbikTjKjkdgPtzhtDSa51CBQIrpeYaVOSXBBzNdF0LtM26a4ts-dTkV0vluNKScHNDiqRpeDgkd93ZMCPilYb_kA4CqPvQzaOW77t4U1/s1600/border.png') 27 round round;
-icab-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYeyMCBpE6XVYTWIkw42Uy2BPK4oxQkvL01t2XLbikTjKjkdgPtzhtDSa51CBQIrpeYaVOSXBBzNdF0LtM26a4ts-dTkV0vluNKScHNDiqRpeDgkd93ZMCPilYb_kA4CqPvQzaOW77t4U1/s1600/border.png') 27 round round;
-khtml-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYeyMCBpE6XVYTWIkw42Uy2BPK4oxQkvL01t2XLbikTjKjkdgPtzhtDSa51CBQIrpeYaVOSXBBzNdF0LtM26a4ts-dTkV0vluNKScHNDiqRpeDgkd93ZMCPilYb_kA4CqPvQzaOW77t4U1/s1600/border.png') 27 round round;
-moz-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYeyMCBpE6XVYTWIkw42Uy2BPK4oxQkvL01t2XLbikTjKjkdgPtzhtDSa51CBQIrpeYaVOSXBBzNdF0LtM26a4ts-dTkV0vluNKScHNDiqRpeDgkd93ZMCPilYb_kA4CqPvQzaOW77t4U1/s1600/border.png') 27 round round;
-webkit-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYeyMCBpE6XVYTWIkw42Uy2BPK4oxQkvL01t2XLbikTjKjkdgPtzhtDSa51CBQIrpeYaVOSXBBzNdF0LtM26a4ts-dTkV0vluNKScHNDiqRpeDgkd93ZMCPilYb_kA4CqPvQzaOW77t4U1/s1600/border.png') 27 round round;
border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYeyMCBpE6XVYTWIkw42Uy2BPK4oxQkvL01t2XLbikTjKjkdgPtzhtDSa51CBQIrpeYaVOSXBBzNdF0LtM26a4ts-dTkV0vluNKScHNDiqRpeDgkd93ZMCPilYb_kA4CqPvQzaOW77t4U1/s1600/border.png') 27 round round;
border: double orange 1em

*.:｡✿ Don't forget to come back again ✿.｡.:*

Visit Wahyudi Blog !
Sumber: css3.info