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 textarea dengan tombol "select all"Belajar kali ini adalah bagaimana kita menggunakan Javascript dan Css untuk menambahkan tombol "select all" pada textarea. Sehingga pengunjung lebih mudah untuk men ... readmore
• Modifikasi Widget Archive dengan CSSMemodifikasi widget archive dengan css, itulah ayang akan kita bahas sekarang, memang mudah memodifikasi widget archive seperti membuat scroll down, menambahkan bac ... readmore
• Cara membuat efek membesar pada gambarMemberikan efek membesar pada gambar adalah salah satu cara menjadikan web atau blog tampil menarik. Biasanya digunakan pada web atau blog yang banyak menampilkan g ... readmore
• Cara membuat fitur slide showBanyak kegunaan fitur slide show ini, antara lain bisa kita manfaatkan untuk menampilkan produk terbaru yang kita tawarkan. Terutama untuk web atau blog yang banya ... readmore
• CSS BackgroundFitur dari css Background berfungsi untuk memberi efek latar belakang suatu elemen. Beberapa properti dan kelebihan dari fitur ini diantaranya kita bisa memberi efe ... readmore