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-bottomright: 50px;
 border-radius-bottomright: 50px;

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

Berikut hasilnya :

 
Contoh B

<div class="Contoh_B" style="

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

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

Berikut hasilnya :

 
Contoh C

<div class="Contoh_C" style="

height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 50px;
border-radius-bottomright: 50px 50px;
-moz-border-radius-topright: 50px 50px;
border-radius-topright: 50px 50px;

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;
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;
border-radius: 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;
border-radius: 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.