Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Web Design, tempat kursus terbaik dan nomor satu. Kali ini saya akan membahas tentang cara Membuat Garis Vertical Pada Menu Menggunakan Border. Sebelumnya saya akan menjelaskan tentang fungsi dari border pada CSS. Border berfungsi untuk membuat garis pinggir pada sebuah element atau objek.
Nama property border bisa kita bedakan menjadi 5 macam, yaitu:
- Border yang berfungsi untuk memberikan garis pinggir semua sisi
- Border-top yang berfungsi untuk memberikan garis pinggir pada bagian atas
- Border-bottom yang berfungsi untuk memberikan garis pinggir pada bagian bawah
- Border-right yang berfungsi untuk memberikan garis pinggir pada bagian kanan
- Border-left yang berfungsi untuk memberikan garis pinggir pada bagian kiri
Nah, langkah pertama untuk Membuat Garis Vertical Pada Menu Menggunakan Border adalah kita buat struktur htmlya terlebih dahulu. Seperti pada script di bawah ini ya teman-teman.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title>Membuat Garis Vertical Pada Menu Menggunakan Border</title> </head> <body> <div class="container"> <header> <h1>Membuat Garis Vertical Pada Menu Menggunakan Border</h1> </header> <menu> <ul> <li>Home</li> <li>Profil</li> <li>About</li> <li>Contact Us</li> </ul> </menu> </div> </body> </html> |
Nah, setelah selesai teman-teman bisa lanjut membuat style cssnya. Seperti pada script di bawah ini ya.
|
1 2 3 4 5 6 7 |
<style type="text/css"> .container{width: 550px; margin: auto;} header{text-align: center;} menu{background: linear-gradient(to bottom, salmon 16%, #8f0222 44%, salmon 99%); height: 40px; color:white; font-weight: bold;} menu ul{list-style: none;} menu ul li{float: left; padding:10px 20px; border-right: 2px solid salmon;} </style> |
Teman-teman bisa perhatikan pada bagian tag menu ul li di cssnya, saya memberikan border-right dengan value 2px solid salmon. Yang artinya saya memberikan border pada tag li di bagian sisi kanan sebesar 2px dengan model garis solid atau garis lurus padat dan warna salmon.
Jika dijalankan di browser masing-masing, maka tampilannya akan seperti pada gambar di bwah ini.
Demikian artikel tentang cara Membuat Garis Vertical Pada Menu Menggunakan Border. Semoga dapat bermanfaat dan selamat mencoba ya teman-teman.