CSS Border

Border adalah garis tepi dari elemen html.

Kita bisa mengatur tampilan dari border elemen dengan menggunakan css, property yang digunakan adalah border.

Border Style

Ada banyak style yang bisa digunakan untuk membuat border, yaitu:

• dashed – hasilnya garis putus-putus
• dotted – border titik-titik
• double – garis bordernya doble / ada dua
• groove – ada efek 3dnya
• hidden – bordernya disembunyikan (sama ja gak pake border)
• inset – efek 3d kedalam
• none – tidak ada bordernya
• outset – efek 3d keluar
• ridge – efek 3d runcing
• solid – bordernya garis lurus (yang biasa dipakai)

Untuk menggunakan border style, dibutuhkan format:

border-style:value;

Contoh penulisan kodenya border-style:solid; kata solid diganti dengan style yang telah saya jelaskan tadi.

Berikut contoh hasil setiap stylenya:

Border dashed

Border dotted

Border double

Border groove

Border hidden

Border inset

Border none

Border outset

Border ridge

Border solid

Tebal Border

Untuk mendefinisikan ketebalan border, kita bisa gunakan border-width. Value yang dimasukkan berupa angka. Dengan format:

border-with: atas kanan bawah kiri;

Searah jarum jam pokoknya.

Kasus 1:

border-width: 10px 30px 5px 20px;

Maka hasilnya: 10px atas, 30px kanan, 5px bawah, 20px bawah.

Kasus 2:

border-width: 10px 30px;

Maka hasilnya: 10px atas dan bawah, 30px kanan dan kiri.

Kasus 3:

border-width: 10px;

Maka hasilnya: semua sisi atas, bawah, kanan dan kiri bernilai 10px.

Contoh penerapannya:

<style type="text/css">
p.border_tebal1 {
	padding: 10px;
	margin-bottom: 20px;
	border-style: solid;
	border-width: 10px 30px 5px 20px; /*10px atas, 30px kanan, 5px bawah, 20px bawah*/
}
p.border_tebal2 {
	padding: 10px;
	margin-bottom: 20px;
	border-style: solid;
	border-width: 10px 30px; /*10px atas bawah, 30px kanan kiri*/
}
p.border_tebal3 {
	padding: 10px;
	border-style: solid;
	border-width: 10px; /*10px semuanya: atas, kanan, bawah, kiri*/
}
</style>

<p class="border_tebal1">border 1</p>
<p class="border_tebal2">border 2</p>
<p class="border_tebal3">border 3</p>

Maka hasilnya adalah:

border 1

border 2

border 3

Warna Border

Didefinisikan dengan property border-color; kamu bisa menggunakan kode warna html seperti kode HEX, CMYK dan RGB.

Contoh kode html:

<style type="text/css">
p.border_warna {
	border-style: solid;
	border-width: 5px;
	border-color: red;
	padding:5px;
}
</style>
<p class="border_warna">border 1</p>

Maka hasilnya adalah:

border 1

Sisi Border

Ada empat posisi border, yaitu:

• border-left yaitu garis tepi sebelah kiri
• border-right yaitu garis tepi sebelah kanan
• border-top yaitu garis tepi sebelah atas
• border-bottom yaitu garis tepi sebelah bawah

Kalau kita hanya ingin spesifik sebelah kiri saja maka yang ditulis adalah border-left.

Kalau kita ingin memberi border di semua sisi maka gunakan border. Setiap sisi bisa diatur secara spesifik. Misalnya:

<style type="text/css">
p.border_sisi {
	border-left: solid 5px red;
	border-right: double 5px black;
	border-bottom: dotted 5px green;
	border-top: dashed 5px blue;
	padding: 20px;
}
</style>
<p class="border_sisi">border style tiap sisi</p>

Hasilnya:

border style tiap sisi

Jadi, kalau kita hanya ingin sisi kiri saja yang diberi border cukup ditulis border-left. Contoh yang lain untuk membuat list:

<style type="text/css">
ul.border_bawah li{
	border-bottom: 1px solid black;
	margin-bottom: 2px;
}
</style>
<ul class="border_bawah">
	<li>contoh saja 1</li>
	<li>contoh saja 2</li>
	<li>contoh saja 3</li>
	<li>contoh saja 4</li>
	<li>contoh saja 4</li>
</ul>

Hasilnya:

• contoh saja 1
• contoh saja 2
• contoh saja 3
• contoh saja 4
• contoh saja 4

Penulisan Singkat Border

Border dapat ditulis dengan ringkas atau bahasa kerennya shorthand yaitu dengan format:

border: warna ketebalan style;

Intinya dalam property border dibutuhkan value dari:

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

Contohnya adalah:

<style type="text/css">
.bordersh_1{
	border:3px solid red;
}
.bordersh_2{
	border-left:3px solid red;
	background: grey
}
</style>
<p class="bordersh_1">Contoh shorthand border 1</p>
<p class="bordersh_2">Contoh shorthand border 2</p>

Hasilnya:

Sekian tutorial mengenai kustom border css. Artikel selanjutnya masih tentang border, tapi rounded border atau border dengan pojok yang melengkung.