Jenis-jenis border dan cara pembuatannya

Setelah kita tahu sedikit tentang border margin dan padding, maka dalam pada posting kali ini masih seputar dasar-dasar dari design blog ini juga. Yaitu Jenis-jenis border dan cara pembuatannya. Seperti yang kita ketahui border ini selain sebagai pembatas, juga sekaligus berfungsi untuk mempercantik tampilan blog.

Penulisan border ini sendiri juga bisa dengan memberikannya secara individu atau arahannya: yaitu atas, bawah, kiri, kanan. Untuk pengaturan dan properti CSS border ini kita bisa menggunakan perintah dari keterangan CSS dibawah ini.

Property Border:

1. Border-color : berfungsi untu menentukan warna.
Cara penentuan warna dari border ini bisa langsung dengan menyebutkan nama dari warna tersebut dalam bahasa inggris. Contoh penulisan:

border-color:red;
border-color:blue;
dsb..

Atau juga dengan menggunakan hex-code atau rbg. Contoh :

border-color:#000; = Hitam pekat, 
border-color:#FFF; = Putih,
dan lain sebagainya.

border-color:rgb(255, 255, 0); untuk warna kuning, 
border-color:rgb(0, 0, 255); untuk warna biru.
Dsb..

Contoh: Property Border-color Individu

border-top-color: red;
border-right-color: #FF6600;
border-bottom-color: rgb(128, 0, 128);
dsb

Untuk menentukan warna dalam bentuk kode ini kita bisa menggunakan color picker yang ada pada program-program design atau bisa juga dengan mencarinya di internet langsung. Ada banyak kok situs yang menyediakannya. Bahkan diblogger sendiri, untuk yang type sederhana kita bisa langsung mendapatkannya di bagian setting template melalui dahsboard kita. Atau jika mau anda juga bisa memasangnya di blog sendiri kalian bisa mendapatkan scriptnya diposting Cara membuat Color Picker diblog.
2. Border-style  : berfungsi untuk menentukan style atau pola dari border.
Value Border-Style antara lain:

Contoh penulisan:

border-style:solid, 
border-style:double.
Dsb..

Contoh: Property Border-style Individu

border-top-style:solid;
border-right-style: dotted;
border-bottom-style: double;
border-left-style: dashed;

3. Border-width: berfungsi untuk menentukan ketebalan dari border.
Untuk penentu ketebalan border kita bisa kode initial, medium atau thick. Namun umumnya dalam proses design website atau template blog, yang biasanya digunakan satuan panjang seperti px, em, cm, in, dsb.

border-width:1px; 
border-width: 2em;
Dsb..

border-top-width: 1px
border-right-width: 2px;
border-bottom-width: 1em;
border-left-width: cm;
Dsb..

Namun pada umumnya tidak semua kode-kode tersebut pasti kita pakai. Biasanya kita juga hanya menuliskannya secara singkat. Untuk penulisan singkat ini kita gunakan jika border yang ingin kita buat memilik style, warna, dan ketebalan yang sama. sebagai contoh kita ingin membuat border kolom kontent dengan border property sebagai berikut: Ketebalan border = 5px Style border = ridge dan warna border = merah. Maka untuk penulisan secara individunya kita akan menuliskan seperti ini.

border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 5px;

border-top-style: ridge;
border-right-style: ridge;
border-bottom-style: ridge;
border-left-style: ridge;

border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;

Anggap disini adalah content

Namun karena border yang ingin kita buat memilik style, warna, dan ketebalan yang sama, maka penulisannya cukup dengan kode seperti dibawah ini:

border: 5px ridge red;

Dan penulisan kode singkatnya ini memilik sifat otomatis. Jadi meski penulisannya terbalik-balik juga tidak masalah.
border: 5px ridge red; atau,
border: ridge 5px red; atau
border: red 5px  ridge;
dsb,,
hasil yang didapatkan adalah sama.

Share this post