Membuat Ujung Border Melengkung dengan CSS

Dalam pembuatan website dinamis dan modern, sangatlah membosankan jika kita hanya memakai element yang kaku dan kotak-kotak saja. Terkadang, kita butuh sudut border object yang melengkung, misalnya dipakai pada text box atau input text biasa. Contoh :



Beberapa orang mungkin akan mengira bahwa kita menggunakan background gambar untuk menciptakan efek melengkung pada text box. Tapi hal itu tidak efisien secara sistem, karena kita harus mendownload image dan menunggu loading yang cukup lama jika terdapat banyak gambar yang harus di download sesuai dengan panjang textbox.

Nah, cara yang tepat adalah menggunakan CSS seperti ini :

.namaclass{
border-radius:10px; /* CSS 3*/
-khtml-border-radius:10px; /* Untuk Linux */
-moz-border-radius:10px; /* Untuk Safari, Chrome, dan WebKit lainnya*/
-webkit-border-radius:10px; /* Untuk Firefox */
}

Pemakaiannya di textbox :

<form>
<input type="text" class="namaclass" />
<form>

Repot juga yah, banyak kodenya. Ya, memang harus menuliskan beberapa CSS code karena belum kompatibel secara seragam di semua browser. Selamat mencoba!
Sumber: http://www.cactusproject.com/blog/cara-membuat-ujung-border-yang-melengkung-dengan-css.php