Fuih… Siang ne panas banget mau ngapa2in rasanya gerah banget.. Tapi gak apa2 d biar gak jenuh banget hari ne karna panas saya mau share aja d buat sobat2 JaCo, Border Dan Border-Radius..
Border pa y…!!?? Trus fungsinya buat desain web pa..!!?? Langsung aja y biar gak kelihatan basa-basi banget..
1. Border : fungsi border ialah memberi efek garis pada sebuah objek, bisa objek lingkaran,kotak,oval dll. Ada 8 macam border dalam CSS3 antara lain : solid, dotted,dashed,inset,outset,ridge,double,groove. Sesuai standart W3C syntak umum untuk border ialah :
border:value1(tipe border),value2(besar ketebalan border),value3(warna border dalam hexa,rgb color,atau nama warna dalam inggris);
contoh :
border:solid 5px red;
border:solid 5px #F0D400;
border:solid 5px rgb(0, 10, 141);
Agar lebih langung saja kita ke contoh masing2 border.
1. SOLID
Buka Notepad dan ketikkan kode css dibawah ini :
<style type="text/css">
.border-solid{
width:150px;
height:150px;
background:#05D400;
border:solid 5px #F0D400;
text-align:center;
}
</style>
Kemudian didalam <body> ketikkan kode pemanggil class dibawah ini :
<div class="border-solid">Ini Tipe Border Solid</div>
Maka hasilnya menjadi seperti ini :
2. DOTTED
Buka Notepad dan ketikkan kode css dibawah ini :
<style type="text/css">
.border-dotted{
width:150px;
height:150px;
background: #009CBE;
border:solid 5px rgb(141, 35, 0);
text-align:center;
}
</style>
Kemudian didalam <body> ketikkan kode pemanggil class dibawah ini :
<div class="border-dotted">Ini Tipe Border Dotted</div>
Maka hasilnya menjadi seperti ini :
3. DASHED
Buka Notepad dan ketikkan kode css dibawah ini :
<style type="text/css">
.border-dashed{
width:150px;
height:150px;
background: #FFD1FF;
border:solid 5px blue
text-align:center;
}
</style>
Kemudian didalam <body> ketikkan kode pemanggil class dibawah ini :
<div class="border-dashed">Ini Tipe Border Dashed</div>
Maka hasilnya menjadi seperti ini :
4. INSET
Buka Notepad dan ketikkan kode css dibawah ini :
<style type="text/css">
.border-inset{
width:150px;
height:150px;
background: #009CBE;
border: inset 5px rgb(141, 35, 0);
text-align:center;
}
</style>
Kemudian didalam <body> ketikkan kode pemanggil class dibawah ini :
<div class="border- inset ">Ini Tipe Border Inset </div>
Maka hasilnya menjadi seperti ini :
5. OUTSET
Buka Notepad dan ketikkan kode css dibawah ini :
<style type="text/css">
.border-outset{
width:150px;
height:150px;
background: #8D34D4;
border: outset 5px rgb(253,63,186);
text-align:center;
}
</style>
Kemudian didalam <body> ketikkan kode pemanggil class dibawah ini :
<div class="border-outset ">Ini Tipe Border Outset</div>
Maka hasilnya menjadi seperti ini :
6. RIDGE
Buka Notepad dan ketikkan kode css dibawah ini :
<style type="text/css">
.border-ridge{
width:150px;
height:150px;
background: #D4B57C;
border:ridge 5px brown;
text-align:center;
}
</style>
Kemudian didalam <body> ketikkan kode pemanggil class dibawah ini :
<div class="border- ridge">Ini Tipe Border Ridge</div>
Maka hasilnya menjadi seperti ini :
7. DOUBLE
Buka Notepad dan ketikkan kode css dibawah ini :
<style type="text/css">
.border-double{
width:150px;
height:150px;
background: #FF0000;
border:double 5px #E4B300;
text-align:center;
}
</style>
Kemudian didalam <body> ketikkan kode pemanggil class dibawah ini :
<div class="border- double">Ini Tipe Border Duoble</div>
Maka hasilnya menjadi seperti ini :
7. GROOVE
Buka Notepad dan ketikkan kode css dibawah ini :
<style type="text/css">
.border-groove{
width:150px;
height:150px;
background: #FF0000;
border:groove 5px #19F400;
text-align:center;
}
</style>
Kemudian didalam <body> ketikkan kode pemanggil class dibawah ini :
<div class="border-groove">Ini Tipe Border Groove</div>
Maka hasilnya menjadi seperti ini :
Ok d sepertinya tutor saya kali ini harus berakhir dlu disini, jika ada yang kurang berkenan atau salah dalam pemberitahuan mohon dikritik y teman. Sebelum lupa juga dibawah ini sudah saya sertakan link donlod dari semua contoh tutorial kita hari jadi teman2 bisa lebih fokus lagi dalam mengutak atik kodenya ataupun ingin lebih berkreasi lagi dengan kodenya..
Saya akhiri tutor kali ini dengan kata “Tetap berusaha”.. Sampai bertemu di tutor yang lainnya.. Salam Sobat Jaco..
