Rounder Corner : Cara Membuat Sudut Menjadi Tumpul

Tadi pagi saya telah membagi sedikit ilmu saya kepada anda mengenai bagaimana " Cara Membuat Energy Saving Mode Dengan CSS"di blog. Di kesempatan kali ini kembali saya hadir mengajak anda untuk sedikit membahas tips blogger mengenai bagaimana "Cara  Membuat Sudut  Menjadi Tumpul Atau Juga Disebut Rounder Corner".

Tentu anda semua bertanya-tanya mengenai apakah yang dimaksud dengan "rounded corner". Sebelum melangkah lebih jauh,akan saya jelaskan pengertian atau kegunaannya.

• Author : Yang dimaksud dengan rounded corner yaitu efek membuat sudut menjadi tumpul.
• Pengunjung : Tiap ujung di site kita ya gan? 
• Author : Yuph bener, mau bikin yang tumpul bagian mana bisa. Yuuk langsung ke TKP.

Rounded corner yang akan kita diskusikan bersama adalah membuat sudut menjadi tumpul tanpa gambar (rounded corner no image). Kemudian bentukkan rounded corner dari kode CSS ini akan hanya dapat dilihat bila anda menggunakan browser Firefox, Chrome, dan Safari.

Tahapan-tahapnya sebagai berikut :

• Login dulu ke blog anda.
• Selanjutnya pilih apa yang anda mau buat menjadi tumpul.
• Kemudian copy paste code dibawah ini, letakan di tempat yang saudara kehendaki. Misalnya kotak pencarian.

Full rounded corner :

.kotak-rounded-corner { background-color:#FFFF00; border:2px solid #FF0000; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; }

Rounded corner di kiri atas :

.kotak-rounded-corner { background-color:#FFFF00; border:2px solid #FF0000; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; -khtml-border-radius-topleft: 10px; border-top-left-radius: 10px; }

Rounded corner di atas :

.kotak-rounded-corner { background-color:#FFFF00; border:2px solid #FF0000; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-radius-topleft: 10px; -khtml-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; }

Rounded corner di bawah :

.kotak-rounded-corner { background-color:#FFFF00; border:2px solid #FF0000; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -khtml-border-radius-bottomleft: 10px; -khtml-border-radius-bottomright: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }

• Finally click buttom save.

Keterangan :

• Trik ini merupakan salah satu dari sekian banyak trik lainnya untuk membuat rounded corner.
• Semakin besar nilai yang kamu masukkan (ex: 10px), maka semakin besar pula ketumpulan/belokan sudut.
• Kode -moz-border-radius digunakan untuk firefox, -webkit-border-radius untuk Chrome dan Safari, -khtml-border-radius untuk browser-browser lama yang mendukung kode ini, serta border-radius untuk pengecekan terhadap browser-browser baru yang mungkin mendukung kode ini.
• Kode di atas merupakan contoh penerapan rounded corner dalam kode CSS.