PENGERTIAN
SleepingCodings - Border bisa di artikan sebagai garis tepi yang akan membentuk kotak, nah untuk kali ini kita akan membahas bagaimana cara memanipulasi border dan apa saja yang dapat kita manipulasi di border yaitu mengubah ukuran, warna,dan gaya bentuk pada border. Seperti kita mengubah garis lurus menjadi titik-titik, atau kita mengubah ketebalan dari garis tepi / bordernya dan kita juga dapat mengubah warna garis border tsb.
MENGUBAH, MENGATUR, MEMBERI WARNA PADA BORDER
index.html
<!DOCTYPE html>
<html>
<head>
<title>Border style CSS sleeping-codings.blogspot.co.id</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="bd-solid">Border dengan gaya solid</p>
<p id="bd-dot">Border dengan gaya dotted</p>
<p id="bd-dash">Border dengan gaya dashed</p>
<p id="bd-dbl">Border dengan gaya double</p>
<p id="bd-grv">Border dengan gaya groove</p>
<p id="bd-inset">Border dengan gaya inset</p>
<p id="bd-outset">Border dengan gaya outset</p>
<p id="bd-ridge">Border dengan gaya ridge</p>
</body>
</html>
style.css
#bd-solid{
border-style:solid;
}
#bd-dot{
border-style: dotted;
}
#bd-dash{
border-style: dashed;
}
#bd-dbl{
border-style: double;
}
#bd-grv{
border-style: groove;
}
#bd-inset{
border-style: inset;
}
#bd-outset{
border-style: outset;
}
#bd-ridge{
border-style: ridge;
}
ketika di jalankan di web browser :
 |
| Gambar 1.1 Mengubah Border dg CSS |
1. border-bottom => Mengatur Garis Bawah
2. border-bottom-color => Mengatur Warna Garis yang Terletak Di Bawah.
3. border-bottom-style => Mengatur Style Garis yang Terletak Di Bawah.
4. border-bottom-width => Mengatur ukuran garis yang terletak di bawah.
5. border-color => Mengatur warna garis.
6. border-left => Mengatur garis yang terletak di sebelah kiri.
7. border-left-color => Mengatur warna garis yang terletak di sebelah kiri.
8. border-left-style => Mengatur style garis yang terletak di sebelah kiri.
9. border-left-width => Mengatur ukuran garis yang terletak di sebelah kiri.
10. border-right => Mengatur garis yang terletak di sebelah kanan.
11. border-right-color => Mengatur warna garis yang terletak di sebelah kanan.
12. border-right-style => Mengatur style garis yang terletak di sebelah kanan.
13. border-right-width => Mengatur ukuran garis yang terletak di sebelah kanan.
14. border-style => Mengatur style garis.
15. border-top => Mengatur garis yang terletak di sebelah atas.
16. border-top-color => Mengatur warna garis yang terletak di sebelah atas.
17. border-top-style => Mengatur style garis yang terletak di sebelah atas.
18. border-top-width => Mengatur ukuran garis yang terletak di sebelah atas.
19. border-width => Mengatur ukuran garis.
KESIMPULAN
Nah, jadi penggunaan border di sini sangat mudah kan ketika temen" lakukan, biasanya border ini di gunakan sewaktu temen" mau buat, tabel, form pendaftaran, bahkan button juga ada yang menggunakan border loh, nah intinya pelajari dan pahami kegunaan dari tiap" border dan tahu cara pengimplementasian atau tahu kapan temen" akan memakai border tersebut.
Semoga Bermanfaat ~
Wassalamu'alaikum Wr.Wb
No comments:
Post a Comment