CSS fungsi Property Border serta Valuenya

border adalah salah satu property css, border memiliki fungsi untuk memberi batas/garis(seperti) pada suatu bidang/box/tag html, value border antara lain solid dotted

Jauhilah kebiasaan menggunjing, karena menyebabkan tiga bencana: pertama, doa tak terkabul. Kedua, amal kebaikan tak diterima. Dan ketiga, dosa bertambah. Ali bin Abi Thalib

border adalah salah satu property css, border memiliki fungsi untuk memberi batas/garis(seperti) pada suatu bidang/box/tag html, value border antara lain solid dotted

Last Modif at July 10th, 2011

border adalah salah satu property css, border memiliki fungsi untuk memberi batas/garis(seperti) pada suatu bidang/box/tag html.

garis atau batas ini bisa kita tentukan bentuk/tampilan atau stylenya, seperti warna, ketebalan, serta style/gaya.

property border antara lain

  • border-color
  • border-style
  • border-width

property border individu

  • border-top-style
  • border-top-color
  • border-top-width
  • border-rigth-style
  • border-right-color
  • border-right-width
  • border-bottom-style
  • border-bottom-color
  • border-bottom-width
  • border-left-style
  • border-left-color
  • border-left-width

property border shorthand(singkat)

  • border
  • border-top
  • border-right
  • border-bottom
  • border-left

value border-style

antara lain

  • solid
  • double
  • dotted
  • dashed
  • groove
  • ridge
  • inset
  • outset

value border-color

antara lain

  • hex color
  • red, blue, pink, silver, dan lain lain
  • rgb color

value border-width

  • angka(panjang) dalam px misal (1px, 2px, 3px, 4px dst)
  • medium

khusus untuk border, dan border individu kita akan bahas secara singkat saja. ini karena penggunaanya boros lebih size, nantinya kita akan menbahas border shorthand secara detail untuk menghemat size dan waktu.

contoh border dalam inline style

border-color, border-style, border-width

contoh code1

<div style="background-color:blue;width:300px;border-style:solid;border-color:red;border-width:5px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

tampilan

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

contoh code2

<div style="background-color:blue;width:300px;border-style:double;border-color:pink;border-width:3px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

tampilan

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

contoh code3

<div style="background-color:blue;width:300px;border-style:dotted;border-color:#00ff00;border-width:7px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

tampilan

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

keterangan

  • penulisan style border sperti diatas sangat tidak saya sarankan
  • yah, karena kita harus menulis propertynya satu-persatu
  • dibawah kita akan membahas versi shorthand(singkatnya)

border-top-style, border-bottom-width, border-right-color dan lain-lain

contoh code1

<div style="background-color:blue;width:300px;height:300px;border-top-style:solid;border-top-color:red;border-top-width:5px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

tampilan

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

contoh code2

<div style="background-color:blue;width:300px;height:300px;border-top-style:solid; border-top-color:red;border-top-width:5px;border-right-style:dotted;border-right-color:silver; border-right-width:8px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

tampilan

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

contoh code3

<div style="background-color:pink;width:300px;height:300px;border-top-style:solid;border-top-color:red; border-top-width:5px;border-right-style:dotted;border-right-color:silver;border-right-width:8px;border-bottom-style:double; border-bottom-color:black;border-bottom-width:4px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

tampilan

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

keterangan

  • penulisan style border sperti diatas sangat tidak saya sarankan
  • yah, karena kita harus menulis propertynya satu-persatu
  • dibawah kita akan membahas versi shorthand(singkatnya)

shorthand border

penulisan border dengan teknik shorthand ini sangat dianjurkan, selain efisian kita juga ngga perlu nulis sylenya panjang-panjang

penulisan property border shorthand(singkat)

seperti ini

  • border
  • border-bottom
  • border-right
  • border-bottom
  • border-left

dengan teknik ini, kita sudah tidak mengenal property border-top-style, border-bottom-width, border-right-color dan lain-lain

value border dengan teknik shorthand seperti ini

  • value border-width(spasi)value border-style(spasi)value border-color

border

border:value; fungsinya untuk membuat sekeliling bidang/tag/box memiliki style garis pinggir, sedangkan value masing-masing sisi akan bernilai sama!

contoh kode ini

<div style="background-color:blue;width:300px;height:300px;border-style:solid;border-color:red;border-width:5px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

jika dibuat dengan teknik shorthand akan menjadi seperti ini

<div style="background-color:blue;width:300px;height:300px;border:5px solid red;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

sedangkan tampilanya akan sama seperti ini

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

border-top

border-top:value; fungsinya untuk membuat style garis pinggir bagian atas!

contoh kode ini

<div style="background-color:blue;width:300px;height:300px;border-top-style:solid;border-top-color:red;border-top-width:5px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

jika dibuat dengan teknik shorthand akan menjadi seperti ini

<div style="background-color:blue;width:300px;height:300px;border-top:5px solid red;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

sedangkan tampilanya akan sama seperti ini

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

border-right

border-right:value; fungsinya untuk membuat style garis pinggir bagian kanan!

contoh kode ini

<div style="background-color:blue;width:300px;height:300px;border-right-style:double;border-right-color:green;border-right-width:6px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

jika dibuat dengan teknik shorthand akan menjadi seperti ini

<div style="background-color:blue;width:300px;height:300px;border-right:6px double green;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

sedangkan tampilanya akan sama seperti ini

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

border-bottom

border-top:value; fungsinya untuk membuat style garis pinggir bagian bawah!

contoh kode ini

<div style="background-color:blue;width:300px;height:300px;border-bottom-style:solid;border-bottom-color:red;border-bottom-width:5px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

jika dibuat dengan teknik shorthand akan menjadi seperti ini

<div style="background-color:blue;width:300px;height:300px;border-bottom:5px solid red;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

sedangkan tampilanya akan sama seperti ini

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

border-left

border-top:value; fungsinya untuk membuat style garis pinggir bagian kiri!

contoh kode ini

<div style="background-color:blue;width:300px;height:300px;border-left-style:solid;border-left-color:red;border-left-width:5px;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

jika dibuat dengan teknik shorthand akan menjadi seperti ini

<div style="background-color:blue;width:300px;height:300px;border-left:5px solid red;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>

sedangkan tampilanya akan sama seperti ini

a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i

contoh border dalam internal style kompleks

perhatikan code dibawah

<html>
<head>
<title>border css</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<style type="text/css">
#misalborder1{
border-style:solid;
border-color:blue;
border-width:5px;
}
#misalborder2{
border-style:double;
border-color:#000000;
border-width:14px;
}
#misalborder3{
border-top-style:double;
border-top-color:#000000;
border-top-width:medium;
border-right-style:dotted;
border-right-color:silver;
border-right-width:medium;
}
#misalborder4{
border-bottom-style:dashed;
border-bottom-color:#000000;
border-bottom-width:8px;
border-left-style:groove;
border-left-color:silver;
border-left-width:12px;
}
#misalborder5{
border-bottom-style:dashed;
border-bottom-color:#000000;
border-bottom-width:30px;
border-left-style:groove;
border-left-color:silver;
border-left-width:12px;
border-top-style:double;
border-top-color:#000000;
border-top-width:medium;
border-right-style:dotted;
border-right-color:silver;
border-right-width:12px;
}
#misalborder6{
border:12px outset green;
}
#misalborder7{
border-top:12px inset green;
}
#misalborder8{
border-top:12px inset green;
border-right:16px ridge green;
}
#misalborder9{
border-top:12px inset green;
border-right:16px ridge blue;
border-bottom:12px groove black;
border-left:16px outset pink;
}
.anggapsebagaikotak{
background-color:red;
height:150px;
width:150px;
margin:10px;
padding:5px;
float:left;
}
/*salam www.indaam.net*/
</head>
</style>
<body>
<div class="anggapsebagaikotak" id="misalborder1">
isi/content isi/content isi/content isi/content
</div><!-- www.indaam.net -->
<div class="anggapsebagaikotak" id="misalborder2">
isi/content isi/content isi/content isi/content
</div><!-- www.indaam.net -->
<div class="anggapsebagaikotak" id="misalborder3">
isi/content isi/content isi/content isi/content
</div><!-- www.indaam.net -->
<div class="anggapsebagaikotak" id="misalborder4">
isi/content isi/content isi/content isi/content
</div><!-- www.indaam.net -->
<div class="anggapsebagaikotak" id="misalborder5">
isi/content isi/content isi/content isi/content
</div><!-- www.indaam.net -->
<div class="anggapsebagaikotak" id="misalborder6">
isi/content isi/content isi/content isi/content
</div><!-- www.indaam.net -->
<div class="anggapsebagaikotak" id="misalborder7">
isi/content isi/content isi/content isi/content
</div><!-- www.indaam.net -->
<div class="anggapsebagaikotak" id="misalborder8">
isi/content isi/content isi/content isi/content
</div>
<!-- www.indaam.net -->
<div class="anggapsebagaikotak" id="misalborder9">
isi/content isi/content isi/content isi/content
</div>
<!--// salam
www.indaam.net //-->
<div style="clear:both;"></div>
<br/><br/><br/>
<p>salam <a href="http://www.indaam.net" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>

untuk melihat hasilnya

  • copy markup style diatas
  • paste ke notepad
  • save as (pilih all types) dengan nama contohbordercss.htm
  • jalankan(double click), atau
  • open with (firefox, ie, opera, safari, chrome)
  • silakan edit valuenya
  • letak valuenya antara : (titik dua) dan ;(titik koma)
  • selamat belajar

note* jika anda membuat style pada suatu tag html(contoh div) lalu anda memberi nilai width:300px; kemudian anda menambahkan border-width:20px, maka nilai width tag tadi akan menjadi 340px. dalam hal ini border ikut memberi nilai width pada tag tadi!

semoga bermafaat

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-