CSS - Border

Melanjutkan materi sebelumnya, tentang CSS Box Model, kita sempat membahas tentang CSS Border, sebagai gaya atau model untuk membuat garis. Untuk melengkapi contoh sebelumnya, anda bisa menggunakan contoh ini sebagai perbandingan:

<html>
<head>
    <style type="text/css">
	border_1{
	border-style:solid;
}
#border_2{
	border-style: dotted;
}
#border_3{
	border-style: dashed;
}
#border_4{
	border-style: double;
}
#border_5{
	border-style: groove;
}
#border_6{
	border-style: inset;
}
#border_7{
	border-style: outset;
}
#border_8{
	border-style: ridge;
}
</style>
</head>
<body>
	<p id="border_1">border dengan gaya solid</p>
	<p id="border_2">border dengan gaya dotted</p>
	<p id="border_3">border dengan gaya dashed</p>
	<p id="border_4">border dengan gaya double</p>
	<p id="border_5">border dengan gaya groove</p>
	<p id="border_6">border dengan gaya inset</p>
	<p id="border_7">border dengan gaya outset</p>
	<p id="border_8">border dengan gaya ridge</p>
</body>
</html>

Hasilnya:

box1

Sedangkan dalam mengatur ukuran border bisa menggunakan property border-width:

<html>
<head>
    <style type="text/css">
	border_1{
	border-style:solid;
	border-width: 5px;
}
#border_2{
	border-style: dotted;
	border-width: 10px;
}
#border_3{
	border-style: dashed;
	border-width: 15px;
}
#border_4{
	border-style: double;
	border-width: 9px;
}
#border_5{
	border-style: groove;
	border-width: 20px;
}
#border_6{
	border-style: inset;
	border-width: 25px;
}
#border_7{
	border-style: outset;
	border-width: 5px;
}
#border_8{
	border-style: ridge;
	border-width: 50px;
}
</style>
</head>
<body>
	<p id="border_1">border dengan gaya solid</p>
	<p id="border_2">border dengan gaya dotted</p>
	<p id="border_3">border dengan gaya dashed</p>
	<p id="border_4">border dengan gaya double</p>
	<p id="border_5">border dengan gaya groove</p>
	<p id="border_6">border dengan gaya inset</p>
	<p id="border_7">border dengan gaya outset</p>
	<p id="border_8">border dengan gaya ridge</p>
</body>
</html>
Hasilnya:

box2

Nah saya kira pemakaian border dari materi seblumnya, sudah anda pahami sampai disini. Untuk memberikan warna pada border Anda cukup menggunakan namanya, seperti biru, atau bisa dengan value RGB atau heksa seperti yang sudah anda pelajari sebelumnya tentang CSS Color. Jadi itu bisa mengambil warna dari apa pun yang ada di bawahnya. Jadi ketika tiba saatnya bagi Anda untuk menentukan seberapa besar border yang anda mau, Anda dapat menentukan dengan berbagai cara berbeda.

Misalnya border solid, dengan ukuran dan warna yang berbeda:

border_1{
	border-style:solid;
	border-width: 5px;
            border-color: green;

}

Dalam contoh pertama, Anda hanya memberikannya border dengan value solid yang lebarnya 5 pixel background hijau. Namun anda bisa memanipulasi border dengan cepat dengan mengisi langsung valuenya:

border_1{
	border:5px solid green;
}

Beberapa gabungan border yang bisa anda gunakan dalam penulisan Box Model antara lain:

border-bottom : untuk mengatur garis pada bagian bawah
border-bottom-color: mengatur warna dari border bottom
border-bottom-style: mengatur style border bottom
border-bottom-width: mengatur ukuran border bottom
border-color: mengatur warna border
border-left: mengatur border sebelah kiri
border-left-color: mengatur warna border left
border-left-style: mengatur style border left
border-left-width: mengatur ukuran border left
border-right: mengatur border sebelah kanan
border-right-color: mengatur warna border right
border-right-style: mengatur style border right
border-right-width: mengatur ukuran border right
border-style: mengatur style border secara umum
border-top: mengatur border bagian atas
border-top-color: mengatur warna border top
border-top-style:mengatur style border top
border-top-width: mengatur ukuran border top
border-width: mengatur ukuran border secara umum

Maka secara umum, Box Model dapat terbentuk dari Gabungan CSS Border, Padding , Margin, Height dan Width suatu elemen. Anda bisa memanipulasi sesuai dengan keinginan anda

Hasilnya:

box3

Ya Ini yang mesti anda lakukan. Dengan memiliki batas kanan, batas kiri, batas atas, batas bawah, anda bisa memodel sebaik mungkin elemen anda. Terdapat margin yang pada dasarnya sebagai ruang di luar border. Ini seperti antara saya dengan anda, ketika saya mengatakan Anda dan tetangga Anda, atau apa yang harus saya katakan adalah antara elemen, dan tetangga elemen. Jadi itu memberi Anda ruang siku di mana Anda tidak ingin ada yang menyentuh Anda. Dengan margin, setiap kali Anda memberikan margin positif, pada dasarnya Anda berkata, arahkan elemen Anda ke kanan atau bawah. Jika Anda memberikan margin negatif, Anda benar-benar akan

bergerak lebih dekat ke tetangga, yang tentunya mengganggu desain elemen anda.

Begitupun dengan Padding, meski sangat mirip dengan konsep ke margin, tetapi ruang ini adalah antara elemen dan border. Itu memberikannya sedikit-sedikit ruang ekstra di dalam. Setiap kali Anda memiliki nilai positif untuk padding, Anda memindahkannya keluar dari elemen. Ya anda harus mencobanya dengan praktek jika ingin mengetahui beda dan fungsinya. Valuenya menggunakan dengan memberikan nilai numerik. Anda akan memberikannya sesuatu seperti 3 piksel atau 10%. Anda tidak memberikan jenis warna apa pun karena itu selalu transparan. Paddingnya selalu akan sama warna sebagai elemen, dan juga margin-nya, mungkin badan halaman. Mereka, persis seperti perbatasan, dapat didefinisikan dalam satu hingga empat nilai. Jadi, jika Anda menempatkan margin 3px, itu akan menjadi 3px di sekeliling semuanya. Jika Anda mengatakan padding, 10px, 5px, Anda akan memiliki bagian atas, bawah, kiri dan kanan.

Jadi, coba saja ini. Dan ketika Anda mencoba dengannya semakin banyak, itu akan lebih masuk akal margin dan yang satunya adalah paddingnya. Salah satu hal yang perlu Anda pahami ketika Anda melakukan padding dan border dan margin, dan semua hal ini yang dalam HTML mengatakan, tinggi dan lebar Anda. Dan apa artinya itu jika Anda memutuskan bahwa Anda ingin lebar elemen Anda menjadi 200 px, maka Anda mungkin perlu mempertimbangkan seberapa besar semua baik bagian dari lebarnya margin, ditambah perbatasan, ditambah padding, ditambah elemen yang sebenarnya dengan dirinya sendiri. Dan semua itu benar-benar kita anggap sebagai lebar sebenarnya dari elemen Anda. Dan ini akan menjadi masalah saat Anda melihat halaman Anda dan merancangnya dan mencoba memutuskan berapa banyak ruang yang diinginkan pada setiap elemen.

Jadi jika kita melihat contoh ini di sini di mana elemen memiliki lebar 100px, paddingnya adalah 10px, marginnya adalah 5px dan batasnya adalah 1px. Saya berharap anda melakukan matematika di kepala Anda, dan mencari tahu berapa lebar elemen ini, termasuk apakah div juga dihitung. Maka lebar yang sebenarnya adalah 132 piksel. Coba lihat 100px, plus 10px, plus 5px, plus 1px, hitungan dari kanan, terus kekiri, tambah 1px, tambah 5px, tambah 10px. Itu semua mesti ditambah. Ketinggiannya pun, dengan cara yang sama, harus menghitung tinggi ditambah padding atas dan bawah, margin atas dan bawah, dan border atas dan bawah.