Percantik Tombol dengan CSS Borders

Kembali lagi dengan artikel saya kali saya akan membagikan sebuah artikel tentang CSS3 dimana pada kali ini saya akan membahas Borders

Dengan CSS3, kita dapat membuat border bulat, menambahkan bayangan ke kotak, dan menggunakan gambar sebagai border - tanpa menggunakan program desain, seperti Photoshop.

Dalam hal ini terdapat sifat-sifat border yaitu sebagai berikut :

• border-radius
• box-shadow
• border-image

Dukungan browser terhadap penggunaan borders

• Internet Explorer 9, dan versi yang lebih baru, mendukung border-radius dan box-shadow.
• Internet Explorer 11 mendukung border-image.
• Firefox, Chrome, dan Safari mendukung semua properti borders.
• Safari 5, dan versi yang lebih tua, membutuhkan awalan -webkit-border- untuk border-image
• Opera mendukung border-radius dan box-shadow, tetapi membutuhkan awalan -o- untuk border-image.

CSS3 Rounded Corners

Menambahkan sudut bulat di CSS2 rumit. Kita harus menggunakan gambar yang berbeda untuk setiap sudut. Di CSS3 itu sangat mudah.
Dalam CSS3, properti border-radius digunakan untuk membuat sudut dibulatkan.

Contoh :

.divBrad
{
 border:2px solid;
 border-radius:25px;
} 
 

CSS3 Box Shadow

Dalam CSS3, properti box-shadow digunakan untuk menambah bayangan pada kotak.

Contoh :

.divBdow
{
box-shadow: 10px 10px 5px #888888;
} 
 

CSS3 Border Image

Dengan properti border-image CSS3 kita dapat menggunakan gambar sebagai border.

Contoh :

.divBimg
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
 

Catatan : Image diletakkan dalam satu folder dengan file css nya

Sumber Referensi :
 W3schools CSS Borders