CSS Border Radius

Assalamu'alaikum Wr.Wb.

CSS Border Radius adalah sebuah deklarasi dari suatu properti yang bertujuan untuk membuat sudut melengkung sesuai dengan nilai yang diberikan. Sedangkan properti CSS Border Radius sendiri ada beberapa macam disesuaikan dengan Pramban yang digunakan, misal-nya sebagai berikut :

-webkit-border-radius (Properti Safari dan Chrome) -moz-border-radius (Properti Modzilla Firefox) border-radius (Properti W3C)

keterangan ke 3 Properti tersebut :

• -webkit-border-radius : Jika Pramban Safari dan Chrome tidak bisa membaca border-radius maka Properti ini dipakai
• -moz-border-radius : Jika Pramban Modzilla Firefox tidak bisa membaca border-radius maka Properti ini dipakai
• border-radius : Standar dasar Properti CSS Border Radius

Untuk memperjelas lihat contoh sebagai berikut, silahkan Mojang dan Bujang untuk mencoba melihat-nya dengan Pramban yang berbeda.

Properti W3C
VALUE	PROPERTI
border-radius: 10px 10px 10px 10px;	border-radius: 10px;
border-radius: 10px 10px 10px 10px;	border-top-left-radius: 10px;
border-radius: 10px 10px 10px 10px;	border-top-right-radius: 10px;
border-radius: 10px 10px 10px 10px;	border-bottom-right-radius: 10px;
border-radius: 10px 10px 10px 10px;	border-bottom-left-radius: 10px;

Properti Safari Dan Chrome
VALUE	PROPERTI
-webkit-border-radius: 10px 10px 10px 10px;	-webkit-border-radius: 10px;
-webkit-border-radius: 10px 0px 0px 0px;	-webkit-border-top-left-radius: 10px;
-webkit-border-radius: 0px 10px 0px 0px;	-webkit-border-top-right-radius: 10px;
-webkit-border-radius: 0px 0px 10px 0px;	-webkit-border-bottom-right-radius: 10px;
-webkit-border-radius: 0px 0px 0px 10px;	-webkit-border-bottom-left-radius: 10px;

Properti Modzilla Firefox
VALUE	PROPERTI
-moz-border-radius: 10px 10px 10px 10px;	-moz-border-radius: 10px;
-moz-border-radius: 10px 0px 0px 0px;	-moz-border-radius-topleft: 10px;
-moz-border-radius: 0px 10px 0px 0px;	-moz-border-radius-topright: 10px;
-moz-border-radius: 0px 0px 10px 0px;	-moz-border-radius-bottomright: 10px;
-moz-border-radius: 0px 0px 0px 10px;	-moz-border-radius-bottomleft: 10px;

Semoga bermanfaat dan berguna, serta bertambah ilmu pengetahuan-nya. Go Blog Go...!!! Amiin

Wassalam