Banyak hal yang terkadang suka kita lupakan, terutama dalam hal etika penggunaan elemen pendukung bagi layouts yang kita gunakan. Kita mengetahui banyak dari Blogger yang menggunakan sebuah layouts yang memiliki tampilan yang sangat elegan layaknya sebuah website komersil. Hal ini tentu sah-sah saja, selama memberi citra yang baik dan tidak melupakan jati diri sebagai Blogger ( blogspot, wordpress,dll).

Format layouts yang ditampilkan pada kategori sebuah template baru, cenderung banyak menggunakan tampilan sebuah gambar sebagai element pendukungnya. Kalau kita lihat hal ini tentu saja sama dengan proses pembangunan design sebuah template pada website komersil. selain itu, kita juga bisa melihat tampilan Border sebagai "line / garis" pembentuk bagi display sebuah template. Peran penting dari si Border inilah yang akan kita bahas pada kesempatan kali ini, namun sebelum kita membahas terlalu jauh ada baik kamu paham akan arti dan fungsi dari border itu sendiri.

Pengertian Border
Border dalam pengkodean bisa kita artikan sebagai : garis tepi atau batas pada sebuah komponen.

Penulisannya
Dalam format Kode CSS biasa kita gunakan border:#000 solid 1px;, border:#fff dashed 2px;

• Pada format penulisan Border:#000solid1px; , kode yang berwarna merah menunjukkan warna dari si border ( dalam hal ini kita mengununakan kode warna hitam ),
• kemudian yang berwarna hijau menunjukkan jenis dari bordernya sendiri, ( dalam hal ini kita menggunakan jenis garis yang solid atau menyambung.
• Dan terakhir pada kode yang berwarna orange menunjukkan ukuran dari si Bordernya itu sendiri ( Ukuran 1px , adalah ukuran untuk satuan terkecil dalam layar moitor. ) maka hasilnya akan seperti ini..

Dari contoh diatas akan kian buat sebuah variasi dimana kita bisa membuat sebuah format untuk tampilan layouts dengan border yang melengkung pada sisi-sisinya. nah contohnya bisa kamu lihat disini :


Dari contoh diatas k'ian hanya menambahkan sebuah kode :

-moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px;

Dalam hal penulisannya sebagai berikut:

Border:#000 solid 1px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px;

penjelasannya :

-moz-border-radius-topleft: 10px; = sisi garis sebelah kiri atas dengan lengkungan 10 pixel.
-moz-border-radius-topright: 10px; = sisi garis sebelah kanan atas dengan lengkungan 10 pixel.
-moz-border-radius-bottomright: 10px; = sisi garis sebelah kanan atas dengan lengkungan 10 pixel.
-moz-border-radius-bottomleft: 10px; = sisi garis sebelah kanan atas dengan lengkungan 10 pixel.

Untuk beberapa modifikasi bisa kamu gunakan hanya 2 format dari kode diatas, contohnya :

Border:#000 solid 1px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px;

Dari kode diatas bisa kamu lihat bahwa kode yang k'ian gunakan adalah :

-moz-border-radius-topleft: 10px; = sisi garis sebelah kiri atas dengan lengkungan 10 pixel.
-moz-border-radius-topright: 10px; = sisi garis sebelah kanan atas dengan lengkungan 10 pixel.

dengan penjelasan bahwa format lengkungan yang k'ian buat berada pada sisi sebalah kiri atas dan kanan atas. sedangkan jika kita mau membuat lengkungan pada sisi kanan bawah atau sisi kiri bawah, cukup dengan mengganti kode berikut :

-moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px;

maka hasilnya sebagai berikut :


Untuk hasil yang berbeda yakni membuat lengkungan pada sisi bagian atas dan bagian bawah saja bisa dengan format sebagai berikut :

-moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 10px;

maka hasilnya akan sebagai berikut :


nah untuk jenis-jenis dari border itu sendiri bisa kamu lihat disini