Membuat Border Lengkung

Yang dimaksud dengan border lengkung adalah border yang melengkung pada pojoknya. Membuat border lengkung dapat dilakukan dengan dua cara, yaitu dengan image / gambar dan dengan kode css.
Namun pada halaman ini, saya hanya akan mencatat tentang cara membuat border lengkung dengan kode css.
Tekniknya adalah dengan melengkungkan sudut border kolom, sedangkan kode yang digunakan adalah :

-moz-border-radius: ...px;

Kode diatas adalah kode dasar yang digunakan untuk membuat lengkungan pada sudut border suatu kolom. Titik-titik pada kode tersebut diganti dengan angka sesuai tingkat kelengkungan yang diinginkan.
Hasilnya adalah kelengkungan pada keempat sudut border. Misalkan saja kelengkungan yang diinginkan adalah sebesar 5 pixels, maka kodenya akan menjadi ssebagai berikut :

-moz-border-radius:10px;

Berikut ini contoh cara menggunakannya :

<span style="padding:5px; background:#660000; color:#fff; -moz-border-radius:5px; border:1px solid #660;"> Border dengan kelengkungan 5 pixels pada keempat sudutnya</span>

Hasilnya adalah :

Border dengan kelengkungan 5 pixels pada keempat sudutnya

Untuk membuat tingkat kelengkungan yang berbeda-beda pada keempat sudutnya, maka yang harus dilakukan hanyalah menambahkan kode berikut ini setelah kode -radius :

-topright = Untuk mengatur kelengkungan sudut kanan atas.

-topleft = untuk mengatur kelengkungan sudut kiri atas.

-bottomright = untuk mengatur kelengkungan sudut kanan bawah.

-bottomleft = untuk mengatur kelengkungan sudut kiri bawah.

Sehingga kode-kodenya menjadi sebagai berikut :

-moz-border-radius-topright: ...px;

-moz-border-radius-topleft: ...px;

-moz-border-radius-bottomright: ...px;

-moz-border-radius-bottomleft: ...px;

Berikut contoh penggunaan kode diatas :

- Lengkungan sudut kiri atas

<span style="padding:5px; background:#660000; color:#fff; -moz-border-radius-topleft:5px; border:1px solid #660;"> Border dengan kelengkungan 5 pixels pada sudut kiri atas</span>

Hasilnya adalah :

Border dengan kelengkungan 5 pixels pada sudut kiri atas

- Lengkungan sudut kanan atas

<span style="padding:5px; background:#660000; color:#fff; moz-border-radius-topright:5px; border:1px solid #660;"> Border dengan kelengkungan 5 pixels pada sudut kanan atas</span>

Hasilnya adalah :

Border dengan kelengkungan 5 pixels pada sudut kanan atas

- Lengkungan sudut kanan bawah

<span style="padding:5px; background:#660000; color:#fff; -moz-border-radius-bottomright:5px; border:1px solid #660;"> Border dengan kelengkungan 5 pixels pada sudut kanan bawah</span>

Hasilnya adalah :

Border dengan kelengkungan 5 pixels pada sudut kanan bawah

- Lengkungan sudut kiri bawah

<span style="padding:5px; background:#660000; color:#fff; -moz-border-radius-bottom-left:5px; border:1px solid #660;"> Border dengan kelengkungan 5 pixels pada sudut kiri bawah</span>

Hasilnya adalah :

Border dengan kelengkungan 5 pixels pada sudut kiri bawah


Berikut contoh cara penggabungan kode-kode di atas :

<span style="padding:5px; background:#660000; color:#fff; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px;border:1px solid #660;"> Border dengan kelengkungan 5 pixels pada sudut kiri bawah dan kanan atas</span>

Hasilnya adalah :

Border dengan kelengkungan 5 pixels pada sudut kiri bawah dan kanan atas

Untuk membuat kolom blog memiliki lengkungan pada sudut bordernya, maka yang harus dilakukan hanyalah menambahkan kode tersebut pada kode css pengatur kolomnya.
Misalkan yang ingin dilengkungkan sudut bordernya adalah kolom sidebar, maka kode tersebut diletakkan tepat setelah kode

#sidebar{

atau tepat sebelum kode

}

pada kode css pengatur sidebar.

Demikian tadi sedikit catatan mengenai border lengkung.
Jika ada yang kurang jelas, silakan disampaikan.
Semoga bermanfaat ...