CSS Border-Radius

Fungsi Properti css border - radius memudahkan kita merubah sudut pada sebuah box atau kotak menjadi tumpul atau melengkung. Bahkan dengan properti css border - radius ini kita bisa membuat sebuah lingkaran. Dan masing - masing sudut bisa diatur nilainnya secara sendiri - sendiri, seperti bagian atas - kanan, atas - kiri, bawah - kanan, dan bawah - kiri.

Contoh A

<div class="Contoh_A" style="

height: 65px; width:160px;
-moz-border-radius: 0 0 50px 0;
-webkit-border-radius: 0 0 50px 0;
border-radius: 0 0 50px 0;

background-color:#C7C8FF;border:2px solid blue;"></div>

Berikut hasilnya :

Contoh B

<div class="Contoh_B" style="

height: 65px;
width:160px;
-moz-border-radius: 0 50px 25px 0;
-webkit-border-radius: 0 50px 25px 0;
border-radius: 0 50px 25px 0;

background-color:#C7C8FF;border:2px solid blue;"></div>

Berikut hasilnya :

Contoh C

<div class="Contoh_C" style="

height: 65px;
width:160px;
-moz-border-radius: 0 50px 50px 0;
-webkit-border-radius: 0 50px 50px 0;
border-radius: 0 50px 50px 0;

background-color:#C7C8FF;border:2px solid blue;"></div>

Berikut hasilnya :

Contoh D

<div class="Contoh_D" style="

height: 65px;
width: 160px;
-moz-border-radius: 25px 50px 25px 50px;
-webkit-border-radius: 25px 50px 25px 50px;
border-radius: 25px 50px 25px 50px;

background-color:#C7C8FF;border:2px solid blue;"></div>

Berikut hasilnya :

Contoh E

<div class="Contoh_E" style="

height: 65px;
width:160px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
border-radius: 25px 25px 25px 25px;

background-color:#C7C8FF;border:2px solid blue;"></div>

Berikut hasilnya :

Contoh F

<div class="Example_F" style="

height: 70px;
width: 70px;
-moz-border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
border-radius: 50px 50px 50px 50px;

background-color:#C7C8FF;border:2px solid blue;"></div>

Berikut hasilnya :

Ok...., Silahkan anda bisa coba mengganti nilai ukurannya sesuka anda, agar terlihat perbedaan hasilnya.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.