Border adalah garis pembatas elemen HTML dengan elemen lain di sekelilingnya. Pada konsep box model, border merupakan area antara padding dan margin suatu elemen HTML. Saat elemen diciptakan border tidak akan terlihat karena secara default border memiliki ketebalan 0px dengan jenis border kosong (none). Agar border bisa terlihat, nilai ketebalan border harus diubah menjadi minimal 1px dengan jenis border solid ataupun lainnya.
Border secara default memang tidak dimunculkan, hal ini disebabkan karena elemen HTML pada dasarnya digunakan untuk menampung teks dan gambar dengan berbagai keperluan. Dan border tidak diperlukan dalam kondisi solid. Namun untuk keperluan tertentu seperti penekanan konten, pengaturan border dalam bentuk solid perlu diberikan. Border dalam bentuk solid membuat konsep box model pada elemen HTML akan semakin terlihat jelas.
Border merupakan garis batas elemen HTML. Untuk menerapkan border pada elemen harus ditetapkan minimal 3 nilai yaitu jenis border (border-style), ketebalan (border-width), dan warna border (border-color). Border sendiri memiliki 4 buah sisi yaitu border sisi atas, sisi bawah, sisi kanan dan sisi kiri. Penetapan nilai border akan efektif berlaku untuk semua sisi border, kecuali dalam metode custom atau untuk bagian sisi tertentu saja.
Metode penulisan sintaks pertama :
border: value-1 value-2 value-2;
Dimana value-1 adalah nilai dari border-style. Lalu value-2 adalah nilai dari border-width. Dan value-3 adalah nilai dari border-color.
Sebagai contoh :
border: solid 2px red;
border: dashed 1pt navy;
border: dotted 1px #ff00ff;
Penulisan di atas merupakan metode CSS - jalan pintas atau sering di kenal sebagai CSS - shorthand. Hasilnya akan efektif untuk semua sisi border.
Metode penulisan sintaks ke-dua :
Penulisan dengan metode ini menggunakan cara dengan menuliskan properti border secara langsung.
border-style: value;
border-width: value;
border-color: value;
Sebagai contoh :
border-style: solid;
border-width: 2px;
border-color: magenta;
Nilai property border-style merupakan jenis border yang bisa digunakan. Property border-width untuk mengatur ketebalan border dengan satuan tertentu misalnya px, pt, em dan lainnya. Property border-color merupakan warna border dengan nilai nama warna baik dalam bentuk color name, nilai warna RGB, nilai warna Hexadesimal, nilai warna HSL dan lainnya.
Berikut contoh penggunaan border dengan nilai yang berbeda untuk setiap elemen HTML di dalam halaman.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
div{
margin:10px;
padding:10px;
color:teal;
font-size: 20px;
}
</style>
</head>
<body>
<div style="border:solid 2px purple;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur.</div>
<div style="border:dashed 2px cyan;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur.</div>
<div style="border:dotted 3px magenta;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur.</div>
<div style="border:solid 1px #ad77ff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur.</div>
</body>
</html>
Border memiliki banyak jenis dan varian yang bisa diterapkan. Semua jenis style border didukung oleh hampir semua browser, jadi tidak perlu khawatir. Jenis border yang paling sering digunakan adalah type solid. Namun anda bisa berkreasi dengan type lainnya seperti dotted dan dashed.
Pada border dengan jenis double, groove, ridge, inset dan outset hal yang perlu diperhatikan adalah ketebalan border. Pada jenis border tersebut ketebalan minimal harus di atas 3px. Jika kurang dari itu, nilai aktual type border tidak akan terlihat dan yang terlihat seperti dalam bentuk solid.
Berikut ini contoh penggunaan jenis border pada elemen HTML :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
div{
margin:10px;
padding:15px;
color:teal;
font-size: 16px;
}
</style>
</head>
<body>
<div style="border:dotted 2px red;">Lorem ipsum dolor sit amet</div>
<div style="border:dashed 2px red;">Lorem ipsum dolor sit amet</div>
<div style="border:solid 2px red;">Lorem ipsum dolor sit amet</div>
<div style="border:double 4px red;">Lorem ipsum dolor sit amet</div>
<div style="border:groove 8px red;">Lorem ipsum dolor sit amet</div>
<div style="border:ridge 8px red;">Lorem ipsum dolor sit amet</div>
<div style="border:inset 8px red;">Lorem ipsum dolor sit amet</div>
<div style="border:outset 8px red;">Lorem ipsum dolor sit amet</div>
</body>
</html>
Hasil Script :
Border merupakan garis batas luar pada suatu elemen HTML yang berbentuk kotak yang mengelilingi elemen tersebut. Karena berbentuk kotak, pasti akan memiliki sudut di setiap ujungnya. Secara default, sudut ujung border berbentuk lancip dengan derajat sudut sebesar 90º
Sudut lancip pada border dapat diatur melalui property border-radius. Property ini akan menghasilkan sudut berbentuk bulat sesuai dengan besaran radius yang diberikan.
Berikut contoh menggunakan border radius dengan berbagai nilai radius :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
div{
margin:10px;
padding:15px;
color:teal;
font-size: 16px;
border:solid 2px blue;
text-align:center;
}
</style>
</head>
<body>
<div style="border-radius: 4px;">Border radius sebesar 4px</div>
<div style="border-radius: 6px;">Border radius sebesar 6px</div>
<div style="border-radius: 8px;">Border radius sebesar 8px</div>
<div style="border-radius: 16px;">Border radius sebesar 16px</div>
<div style="border-radius: 20px;">Border radius sebesar 20px</div>
<div style="border-radius: 40px;">Border radius sebesar 40px</div>
</body>
</html>
Hasil Script :
Custom atau tampilan border terserah pengguna, dapat diterapkan pada elemen HTML. Border custom ini mengatur nilai border dengan nilai yang tidak biasa, misalnya border atas dalam bentuk garis putus-putus, dan border bawah dalam bentuk solid, atau pun menggunakan border bawah saja dengan garis putus-putus dan lain sebagainya.
Border dengan border custom biasanya digunakan untuk situasi tertentu saja, misalnya terdapat perubahan tema suatu konten yang mengharuskan terjadinya penekanan pada suatu elemen tertentu.
Berikut contoh border custom yang dipakai untuk menata gaya elemen :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
div{
margin:20px;
padding:15px;
color:teal;
font-size: 16px;
text-align:center;
}
</style>
</head>
<body>
<div style="border:none 3px red;border-bottom-style:solid;">Lorem ipsum dolor sit amet.</div>
<div style="border:none 8px magenta;border-bottom-style:groove;border-top-style:solid;">Lorem ipsum dolor sit amet.</div>
<div style="border:none 8px blue;border-left-style:ridge;border-right-style:ridge;">Lorem ipsum dolor sit amet.</div>
<div style="border:none 8px yellow;border-top-style:dotted;border-top-color:teal;border-right-style:double;border-right-color:cyan;border-bottom-style:inset;border-bottom-color:maroon;border-left-style:dashed;border-left-color:pink;">Lorem ipsum dolor sit amet.</div>
<div style="border:solid 8px blue;border-radius:50%;border-bottom-style:inset;border-bottom-color:cyan;width:110px;">Lorem ipsum dolor sit amet.</div>
</body>
</html>
Berikut ini tabel property border dan nilainya :
| No. | Property | Penjelasan |
|---|---|---|
| 1. | border-style | Style pada border (none, solid, dotted, dashed, double, inset, outset, groove, ridge). |
| 2. | border-width | Ketebalan border (px, pt, dll). |
| 3. | border-color | Warna pada border (red, yellow, green, magenta, dll). |
| 4. | border-radius | Memberi sudut yang bulat pada tiap sudut border (px, pt, dll). |
| 5. | border-top-style | Style pada border top (none, solid, dotted, dashed, double, inset, outset, groove, ridge). |
| 6. | border-top-width | Ketebalan border top (px, pt, dll). |
| 7. | border-top-color | Warna pada border top (red, yellow, green, magenta, dll). |
| 8. | border-top-radius | Memberi sudut yang bulat pada tiap sudut border top (px, pt, dll). |
| 9. | border-right-style | Style pada border right (none, solid, dotted, dashed, double, inset, outset, groove, ridge). |
| 10. | border-right-width | Ketebalan border right (px, pt, dll). |
| 11. | border-right-color | Warna pada border right (red, yellow, green, magenta, dll). |
| 12. | border-right-radius | Memberi sudut yang bulat pada tiap sudut border right (px, pt, dll). |
| 13. | border-bottom-style | Style pada border bottom (none, solid, dotted, dashed, double, inset, outset, groove, ridge). |
| 14. | border-bottom-width | Ketebalan border bottom (px, pt, dll). |
| 15. | border-bottom-color | Warna pada border bottom (red, yellow, green, magenta, dll). |
| 16. | border-bottom-radius | Memberi sudut yang bulat pada tiap sudut border bottom (px, pt, dll). |
| 17. | border-left-style | Style pada border left (none, solid, dotted, dashed, double, inset, outset, groove, ridge). |
| 18. | border-left-width | Ketebalan border left (px, pt, dll). |
| 19. | border-left-color | Warna pada border left (red, yellow, green, magenta, dll). |
| 20. | border-left-radius | Memberi sudut yang bulat pada tiap sudut border left (px, pt, dll). |
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
