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.

Judul: CSS Border-Radius; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• Cara membuat efek shadow pada kotak dan gambar Penggunaan css3 memang menajubkan. Css3 merupakan pengembangan dari css 1 dan css 2. Keunggulan CSS3 memiliki banyak fitur. seperti shadow, transparansi, gradiasi ... readmore
• CSS3 GeneratorSebelum memasuki pembahasan tentang CSS3 Generator, saya akan menjelaskan tentang Apa itu CSS3? mungkin dari kalian ada yang belum mengetahuinya menurut info yang s ... readmore
• Cara hanya menampilkan judul posting saja pada halaman depan blogUpdate kembali trik cara hanya menampilkan judul postingnya saja pada halaman depan atau home page. Mengingat cara ini memang sangat efisien dan sangat menghemat te ... readmore
• Cara buat Fitur Slide AccordionKarya baru lagi saya buat dan kupersembahkan untuk anda yang selalu setia mampir di blog ini.  Widget ini saya beri nama Fitur Slide Accordion. Selain tampilan ... readmore
• Cara membuat slide dengan efek marqueeAnimasi slide foto atau gambar dengan menggunakan efek marquee, tidak kalah menarik bila dibanding dengan animasi flash. Selain lebih ringan, animasi slide ini dile ... readmore