Pada kesempatan kali ini saya akan menjelaskan fungsi property border di css. Mungkin teman-teman sudah banyak yang tahu apa itu border dan bagaimana penerapan nya di css. Border adalah garis tepi suatu element html yang di atur dengan menggunakan property css dengan ketebalan, jenis garis serta warna garis tersebut yang dapat di atur dengan mudah.
Border terbagi menjadi beberapa bagian, di antaranya:
- Border adalah garis tepi atas, kanan, bawah, dan kiri dari suatu elemen, dari property tersebut yaitu dengan penggunaan border-top, border kanan, border bawah, dan border kiri cukup dengan menggunakan property saja, namun untuk yang lebih spesifik dapat di gunakan property border tersebut sesuai dengan keinginan teman-teman.
- border-top adalah garis tepi suatu elemen atas
- border-right adalah garis tepi suatu elemen kanan
- border-bottom adalah garis tepi suatu elemen bawah
- border-left adalah garis tepi suatu elemen sebelah kiri
Dengan penulisan seperti berikut:
|
1 |
border: <line-width> || <line-style> || <color> |
line-width adalah nilai untuk ketebalan garis elemen pada html tersebut
line-style adalah nilai untuk jenis garis elemen pada html tersebut, di sini tersedia beberapa pilihan untuk jenia tersebut
line-width adalah nilai untuk warna garis elemen pada html tersebut.
Untuk penulisan property dari border tersebut bisa digunakan dengan satu argumen, dua argumen atau tiga argument sebagai nilai yang di abaikan, seperti contoh di bawah ini:
- Buatlah satu buah file html, beri nama terserah teman-teman, dan pada contoh ini kode css saya gabungkan dengan kode html di file index.html, setelah itu salinlah kode seperti contoh di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!doctype html> <html> <title>Contoh penggunaan border di css</title> <head> <style> .kotak {width: 500px; margin:auto; padding:40px 0; text-align:center; border:7px solid #111; margin-top: 20px; background-color: red} .kotak1 {width: 500px; margin:auto; padding:40px 0; text-align:center; border-top:7px solid #111; margin-top: 20px; background-color: green} .kotak2 {width: 500px; margin:auto; padding:40px 0; text-align:center; border-right:7px solid #111; margin-top: 20px; background-color: blue;} .kotak3 {width: 500px; margin:auto; padding:40px 0; text-align:center; border-bottom:7px solid #111; margin-top: 20px; background-color: orange} .kotak4 {width: 500px; margin:auto; padding:40px 0; text-align:center; border-left:7px solid #111; margin-top: 20px;} </style> </head> <body> <div class="kotak"> Ini Adalah Contoh Border top, right, bottom dan kiri </div> <div class="kotak1"> Ini Adalah Contoh Border top </div> <div class="kotak2"> Ini Adalah Contoh Border right </div> <div class="kotak3"> Ini Adalah Contoh Border bottom </div> <div class="kotak4"> Ini Adalah Contoh Border kiri </div> </body> </html> |
2. Jika sudah save dan lihat hasilnya pada browser
Sampai di sini penjelasan saya mengenai fungsi property border di css, semoga bermanfaat.