Berdasarkan request dari salah seorang member DELOGIN yang menginginkan penjelasan lengkap mengenai CSS border saya membuat artikel ini untuk mudah dimengerti oleh newbie sekalipun. Walaupun sudah banyak di bahas di blog blog lain tapi tak apalah.
          CSS Border adalah CSS yang pada umumnya digunakan untuk menambahkan garis tepi atau garis pembatas pada sebuah objek. Bagi kalian web master pastilah sudah sangat hafal dengan yang namanya CSS border ini, saya sendiri sering menggunakannya. Okelah, langsung saja, silahkan dipelajari semua hal tentang CSS border di bawah ini.

Properti pada CSS Border

Properti dasar pada border terdiri dari 3 jenis, yaitu:

• border-width
Digunakan untuk menentukan tingkat ketebalan border. Satuan ukuran yang biasa digunakan adalah pixel, akan tetapi kita juga bisa menggunakan alternatif dengan mengetik kata thin (tipis), medium (sedang), atau thick (tebal).
• border-style
Digunakan untuk menentukan tipe border. Jika tidak ada border-style maka border-width dan border-color tidak akan bekerja.
Berikut ini saya tampilkan beberapa style yang bisa kita gunakan pada CSS border:
border-style: none;
border-style: solid;
border-style: dashed;
border-style: dotted;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
• border-color
Digunakan untuk menentukan warna border. Kita bisa menggunakan format warna HEX, RGB, atau menuliskan langsung nama warna yang kita inginkan (dalam bahasa Inggris tentunya).

Penerapan CSS Border

          Dalam penerapan CSS border ini kita bisa menggunakan 2 metode, yaitu meletakkan css pada CSS area (kode yang diawali <style type='text/css> dan diakhiri </style>) atau meletakkannya langsung pada Element HTML. Untuk lebih jelasnya perhatikan contoh berikut:

CSS Area	HTML Area
<style type='text/css'> #dz-border { border-width: 4px; border-style: double; border-color: blue; } </style> -------------------------------------- <div id='dz-border'>Objek</div>	<div style='border-width: 4px;border-style: double;border-color: blue;'>Objek</div>

          Karena pada umumnya CSS border ini digunakan untuk memperindah objek penggunaan paling sering adalah diletakkan pada CSS area, akan tetapi pada saat-saat tertentu seperti pembuatan contoh border pada post ini saya menggunakan cara di HTML Area/ Element HTML. Kurang lebih seperti itulah penerapan CSS border.

Lebih lanjut mengenai CSS Border

          Jika dilihat sekilas menggunakan tiga properti border tadi terlalu banyak memakan tempat, apa lagi jika kita menggunakan banyak css pada satu objek. Tenang saja, hal tersebut bisa diatasi, caranya dengan menggabungkan ketiga properti tadi (border-width, border-style, dan border-color) menjadi satu properti, yaitu border. Untuk contoh dan urutannya bisa sobat lihat dibawah ini:

border: border-width border-style border-color;
border: 4px double #08F;

          Nah, bagaimana cara membuat tampilan border yang berbeda di setiap sisinya?... Terkadang muncul pertanyaan seperti itu bukan?... Untuk menjawabnya simak penjelasan berikut ini:
          Properti border yang kita gunakan tersebut sebenarnya adalah ringkasan dari properti border-top, border-right, border-bottom, dan border-left yang diringkas menjadi satu kesatuan, yaitu border. nah, untuk membuat tampilan border yang berbeda disetiap sisinya kita bisa menggunakan ke-empat properti tersebut. Untuk lebih jelasnya perhatikan contoh berikut:
Cara 1:

border-top: 4px double green; /*pengaturan border atas*/
border-right: 4px solid red; /*pengaturan border kanan*/
border-bottom: 2px dotted blue; /*pengaturan border bawah*/
border-left: 4px ridge yellow; /*pengaturan border kiri*/

          Selain cara 1 tersebut kita juga bisa menggunakan tiga properti yang kita pelajari di awal tadi dan memasukkan nilainya sesuai jenisnya. Pada umumnya untuk urutan nilai yang biasa digunakan untuk pengaturan sisi adalah sama, yaitu atas kanan bawah kiri, begitu pula dengan CSS border ini.
Cara 2:

properti: top right bottom left
border-width: 4px 4px 2px 6px; /*pengaturan lebar border*/
border-style: double solid dotted ridge; /*pengaturan tipe border*/
border-color: green red blue yellow; /*pengaturan warna border*/

Untuk hasil dari kedua cara diatas bisa sobat lihat dibawah ini:

          Nah, bagaimana?... Sudah mengerti bukan tentang CSS border ini?... Saya rasa cukup sudah pengenalan CSS border ini, semoga postingan kali ini bermanfaat.