Membuat Border Lengkung

Thursday, July 1, 2010
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 ...

Comments :

6 komentar ke "Membuat Border Lengkung"

blogger admin on July 1, 2010 at 3:36 PM said...

wah..terima kasih sobat sudah berbagi..
salam persahabatan

Ari on July 3, 2010 at 12:39 AM said...

Salam juga!

Anonymous said...

BEST OF THE BEST IN THE BEST TUTORIAL...

VERY-VERY THANK!!!

Anonymous said...

MANTAP INFONYA, MAKASIH MAS

matth on December 30, 2010 at 10:21 AM said...

INI DIA YANG AKU CARI2 DARI ABAD 19, hahahaa...

Ari on February 26, 2011 at 9:41 PM said...

@all : terima kasih juga telah berkenan membaca postingan saya...


Post a Comment

Silakan berkomentar sesuka Anda. Namun jangan spam, berbau SARA, kekerasan, porno atau intimidasi terhadap orang lain. Komentar yang melewati batas akan di hapus. Terima kasih.

Get Update

Masukkan alamat e-mail Anda pada kotak di bawah ini untuk mendapatkan update terbaru dan berlangganan catatan dari blog "The Notes Web" via e-mail :


Privacy guaranteed, we will never share your e-mail.

Komentar terbaru

Catatan Terbaru

Komentar Terbaru