Cara Membuat Rounded Corner

Memang asyik bila kita sudah berhadapan dengan kode css, sebab dengan kode-kode css kita bisa buat efek apa saja seperti :  efek rounded corner, text shadow, transform rotate, selector, dan lain-lain. Dan semua itu masih banyak yang belum kita coba. Tapi tak mengapa, masih banyak waktu kita untuk menjelajahi kode css dan efek-efeknya.

OK...!!! Kali ini kita akan mencoba untuk membuat sebuah  kotak dengan sudut tumpul atau sering juga di sebut dengan  rounded corner. Rounded Corner adalah sebuah efek melengkungkan sebuah garis (border) pada sebuah elemen di web, tentunya hal ini untuk memudahkan kita dalam mendesain web ataupun blog.

Apalagi Rounded Corner ini diberi efek background warna gradasi, pasti akan tambah indah desain web atau blog kita. Tapi untuk efek gradasi akan saya jelaskan pada postingan berikutnya.

Perhatikan sudut-sudut dari garis dibawah ini :
 

DISINI

TEKS ANDA

DISINI

TEKS ANDA

DISINI

TEKS ANDA

Keterangan :

Warna bisa diubah sesuai selera

(-moz-border) dan (webkit-border) bisa anda rubah, semakin kecil nilai "px"nya akan semakin meruncing sudutnya,dan sebaliknya, semakin besar nilai "px"nya akan semakin tumpul sudutnya.

Berikut kode css dari bentuk di atas adalah : 

<div style="border:#1589FF 3px solid; -moz-border-radius:10px; -webkit-border-radius:10px;">

    DISINI TEKS ANDA</div>

Catatan :

Gunakan browser versi terbaru yang support CSS3 dan jangan gunakan Internet Explorer, misalnya browser Mozilla Firefox, agar trik ini bisa tampil.

Jadi deh.....
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.