Cara Membuat Rounded Corner

Sebelum memulai tutorial kita kali ini saya akan membahas sedikit apa itu rounded corner, rounded corner atau bisa diartikan sudut tumpul atau sebuah sudut yang mempunyai ketajaman kurang dari 45 derajat, terkadang kita bosan dengan tampilan sebuah sudut yang itu-itu saja kita juga tentunya ingin berkreasi dengan membuat tampilan sebuah sudut yang tumpul sbenarnya postingan saya ini didapat ketika saya blogwalking di blog teman saya Rastanzshare yang membuat tutorial bagaimana membuat tampilan templet blog dengan sudut yang tumpul disertakan dengan contohnya pada postingannya, dan kode-kode itu harus dipasang pada deretan kode CSS, saya pikir sangat ribet sekali jika membuat contoh tampilannya harus memasangnya pada deretan kode CSS pada kode HTML templet blog.

Akhirnya saya bertanya pada Rastanzshare bagaimana cara memasangnya di elemen widget Java script/HTML akhirnya saya diberi tahu bagaimana cara memasangnya, nah ini dia kodenya.

Contoh

rounded

corner</div>

dan tampilannya jadi seperti ini

Contoh
rounded
corner

perhatikan kode -moz-border-radius-topleft: 10px; ini artinya sudut atas sebelah kiri yang bersudut tumpul dan jika ingin sudu kanan atas yang tumpul maka sobat tinggal menambahkan kode -moz-border-radius-topright: 10px; maka kode nya menjadi seperti ini.

Contoh

rounded

corner</div>

dan tampilannya menjadi seperti ini.

Contoh
rounded
corner

Untuk sudut tumpul bagian bawah kodenya seperti ini.

Contoh

rounded

corner</div>

dan tampilannya seperti ini.

Contoh
rounded
corner

dan ini kode untuk tampilan semua sudut tumpul.

<div style="-moz-border-radius: 10px 10px 10px 10px; background-color: lime; border: 2px solid rgb(255, 0, 0); padding: 6px 0pt 6px 5px;">
Contoh
rounded
corner</div>

Contoh
rounded
corner

sobat bisa merubah nilai 10px dengan yang nilai lebih besar atau lebih kecil semakin besar nilainya maka semakin tumpul sudutnya begitu juga sebaliknya.
semog bermanfaat dan selamat mencoba.