Border-Image
Banyak hal yang menarik di sediakan oleh CSS3 dari segi border, misal kita dapat menerapkan sisi gradient, mengganti border dengan image, bahkan kita dapat membuat sudut round dengan tidak menggunakn gambar, hebat bukan? .
Buat file dengan nama border_img.html yang isinya seperti berikut:
<!DOCTYPE HTML>
<html>
<head>
<title> Border Effects </title>
<style>
h4 {
border-width: 27px;
-moz-border-image: url(border.gif) 27 repeat;
-webkit-border-image: url(border.gif) 27 repeat;
border-image: url(border.gif) 27 repeat;
</style>
</head>
<body>
<h4> Welcome to CSS3 </h4>
</body>
</html>
Nah setelah di coba-coba ternyata efek ini hanya berpengaruh pada web browser Google & Safari
hasilnya akan seperti gambar berikut:
ConversionConversion EmoticonEmoticon