Tutorial Belajar CSS Part 19 – Mengatur Border dengan CSS

bySetyo Wibowo ID - 0

Dalam tutorial ini kita akan membahas mengenai penggunaan border pada CSS, border adalah garis yang ada pada obyek sehingga bisa menjadi pembatas satu obyek dengan obyek lainnya.





CSS menyediakan banyak fitur yang bisa anda gunakan untuk mengatur dari border, seperti mengatur bagaimana style garis, pewarnaan dan ukuran.





Baik Langsung saja untuk Fitur CSS yang bisa anda gunakan untuk mengatur border antara lain :





Border Style





Border style digunakan untuk mengatur bagaimana style dari sebuah garis, semisal anda ingin membuat garis lurus, garis putus putus dan model garis yang lain, anda dapat menggunakan property border-style, untuk lebih memahami silahkan perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
	<title>Contoh Border Style</title>
	<style type="text/css">
		p.dotted {
			border-style: dotted;
		}
		p.dashed {
			border-style: dashed;
		}
		p.solid {
			border-style: solid;
		}
		p.double {
			border-style: double;
		}
		p.groove {
			border-style: groove;
		}
		p.ridge {
			border-style: ridge;
		}
		p.inset {
			border-style: inset;
		}
		p.outset {
			border-style: outset;
		}
		p.none {
			border-style: none;
		}
		p.hidden {
			border-style: hidden;
		}
		p.mix {
			border-style: dotted dashed solid double;
		}
	</style>
</head>
<body>
	<h2>Contoh Penggunaan Border Style</h2>
	<p class="dotted">Paragraf Menggunakan dotted border.</p>
	<p class="dashed">Paragraf Menggunakan dashed border.</p>
	<p class="solid">Paragraf Menggunakan solid border.</p>
	<p class="double">Paragraf Menggunakan double border.</p>
	<p class="groove">Paragraf Menggunakan groove border.</p>
	<p class="ridge">Paragraf Menggunakan ridge border.</p>
	<p class="inset">Paragraf Menggunakan inset border.</p>
	<p class="outset">Paragraf Menggunakan outset border.</p>
	<p class="none">Paragraf Menggunakan border.</p>
	<p class="hidden">Paragraf Menggunakan hidden border.</p>
	<p class="mix">Paragraf Menggunakan mixed border.</p>
</body>
</html>




semisal kita simpan dengan nama border-style.html, lalu kita buka di browser maka tampilannya adalah sebagai berikut :









Penjelasannya :





  • Terlihat beberapa paragraf yang menggunakan garis border yang berbeda, hal tersebut dikarenakan kita menggunakan border style yang berbeda di masing – masing paragraf
  • Perhatikan penggunaan masing masing dari value border-style pada masing masing class yang digunakan di masing masing paragraf
  • Jika anda belum memahami penggunaan class silahkan baca pembahasan kami mengenai jenis jenis selector css




Border-width





Selain bisa mengatur style dari garis border, CSS juga dapat digunakan untuk mengatur ukuran dari border. Anda bisa menentukan ukurannya apakah 1 px 2 px dan seterusnya.





Untuk lebih memahami silahkan perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
<style>
p.satu {
    border-style: solid;
    border-width: 2px;
}

p.dua {
    border-style: solid;
    border-width: 5px;
}

p.tiga {
    border-style: solid;
    border-width: thick;

}

p.empat {
    border-style: solid;
    border-width: medium;
}

p.lima {
    border-style: solid;
    border-width: 10px 5px 1px 20px;
}
</style>
</head>
<body>

<h2>Contoh Penggunaan Property border-width</h2>

<p class="satu">Paragraf Ke - 1</p>
<p class="dua">Paragraf Ke - 2</p>
<p class="tiga">Paragraf Ke - 3</p>
<p class="empat">Paragraf Ke - 4</p>
<p class="lima">Paragraf Ke - 5</p>

</body>
</html>




semisal kita simpan dengan nama border-width.html lalu silahkan buka di browser, maka tampilannya adalah sebagai berikut :









Penjelasannya sebagai berikut :





  1. Paragraf pertama menggunakan ukuran border-width 2px; pada class satu
  2. Paragraf kedua menggunakan ukuran border-width 5px; pada class dua
  3. Paragraf ketiga menggunakan ukuran border-width thick; pada class tiga
  4. Paragraf keempat menggunakan ukuran border-width medium; pada class empat
  5. Paragraf kelima menggunakan ukuran border-width 10px 5px 1px 20px; maka ukuran border 10px (bagian atas), 5px (bagian kanan), 1px (bagian bawah), 20px (bagian kiri)




Border-Color





Selain merubah style garis dan ukuran garis, CSS juga dapat digunakan untuk mengatur warna dari garis, untuk lebih memahami silahkan perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
<style>
p.satu {
    border-style: solid;
    border-color: blue;
}

p.dua {
    border-style: solid;
    border-color: orange;
} 

p.tiga {
    border-style: solid;
    border-color: blue red orange green;
} 
</style>
</head>
<body>

<h2>Contoh Penggunaan Property Border-color</h2>

<p class="satu">Paragraf Pertama</p>
<p class="dua">Paragraf Kedua</p>
<p class="tiga">Paragraf Ketiga</p>

</body>
</html>




Semisal kita simpan dengan nama border-color.html lalu silahkan buka di browser maka hasilnya adalah sebagai berikut :









Penjelasannya sebagai berikut :





  1. Paragraf pertama untuk border memiliki warna garis biru, karena class satu menggunakan property border-color:blue;
  2. Paragraf kedua untuk border memiliki warna garis orange, karena class dua menggunakan property border-color:orange;
  3. Paragraf ketiga untuk border memiliki warna garis biru(atas), merah(kanan), orange(bawah), dan hijau(kiri) karena class tiga menggunakan property border-color: blue red orange green;




Border Shorthand Property





Istilah shorthand adalah pemendekan dalam penulisan property border di CSS, jadi anda dapat menset style, ukuran dan warna garis border, secara bersamaan dalam satu perintah.





silahkan perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
    border: 10px solid blue;
}
</style>
</head>
<body>
<h2>Property</h2>
<p>Paragraf ini menggunakan border shorthand css</p>
</body>
</html>








semisal kita simpan dengan nama border-shorthand.html lalu kita buka di browser, maka hasilnya adalah sebagai berikut :









Penjelasan :





Individual Border





Selain anda bisa menuliskan perintah border secara bersamaan, anda juga bisa menuliskan perintah border dengan terpisah, maksud terpisah disini anda dapat mengatur bagian tertentu dari border, semisal anda ingin mengatur hanya bagian border atas yang menggunakan warna biru dan garis putus putus, nah anda bisa menuliskan dengan individual border ini, perhatikan skrip dibawah ini :





  • border-top-style : digunakan untuk mengatur style garis pada border bagian atas
  • border-right-style : digunakan untuk mengatur style garis pada border bagian kanan
  • border-bottom-style : digunakan untuk mengatur style garis pada border bagian bawah
  • border-left-style : digunakan untuk mengatur style garis pada border bagian kiri
  • border-top-width : digunakan untuk mengatur ukuran garis pada border bagian atas
  • border-right-width : digunakan untuk mengatur ukuran garis pada border bagian kanan
  • border-bottom-width : digunakan untuk mengatur ukuran garis pada border bagian bawah
  • border-left-width : digunakan untuk mengatur ukuran garis pada border bagian kiri
  • border-top-color : digunakan untuk mengatur warna garis pada border bagian atas
  • border-right-color : digunakan untuk mengatur warna garis pada border bagian kanan
  • border-bottom-color : digunakan untuk mengatur warna garis pada border bagian bawah
  • border-left-color : digunakan untuk mengatur warna garis pada border bagian kiri




Nah Sebagai Contoh Perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
	<title>Individual Border</title>
<style type="text/css">
	p {
		border-top-color: red;
		border-top-width: 5px;
		border-top-style: solid;

		border-bottom-color: blue;
		border-bottom-width: 1px;
		border-bottom-style: dotted;

	}
</style>
</head>
<body>
<p>Paragraf Pertama</p>
</body>
</html>








semisal kita simpan dengan nama individual-border.html lalu silahkan buka di browser :









maka hasilnya seperti gambar diatas, penjelasannya sebagai berikut :





Paragraf tersebut untuk border bagian atasnya menggunakan warna merah, dan garisnya solid, serta memiliki ukuran 5 pixel, hal tersebut karena menggunakan property dan value                 border-top-color: red;
border-top-width: 5px;
border-top-style: solid;





Paragraf tersebut untuk border bagian bawah menggunakan warna biru, dan garis solid, serta ukurannya 1 pixel, hal tersebut karena menggunakan property dan value 





border-bottom-color: blue;
border-bottom-width: 1px;
border-bottom-style: dotted;





Bagaimana teman – teman cukup mudah kan cara untuk mengatur border didalam CSS, kita telah belajar mengenai mengganti style, warna, dan ukuran garis, jika ada yang ingin didiskusikan silahkan di kolom komentar, sampai jumpa di tutorial CSS Selanjutnya


Tags:

Post a Comment (0)

Lebih baru Lebih lama