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:

  1. Border yang berfungsi untuk memberikan garis pinggir semua sisi
  2. Border-top yang berfungsi untuk memberikan garis pinggir pada bagian atas
  3. Border-bottom yang berfungsi untuk memberikan garis pinggir pada bagian bawah
  4. Border-right yang berfungsi untuk memberikan garis pinggir pada bagian kanan
  5. 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.

Nah, setelah selesai teman-teman bisa lanjut membuat style cssnya. Seperti pada script di bawah ini ya.

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.

Membuat Garis Vertical Pada Menu Menggunakan Border

Demikian artikel tentang cara Membuat Garis Vertical Pada Menu Menggunakan Border. Semoga dapat bermanfaat dan selamat mencoba ya teman-teman.

WhatsApp chat