CARA MEMBUAT GARIS DI HTML CSS

Membuat garis di HTML CSS bisa menjadi langkah yang cukup membuat bingung, terutama bagi pemula. Tapi jangan khawatir, karena sebenarnya prosesnya tidak serumit yang kamu bayangkan. Dalam artikel ini, kita akan membahas cara mudah membuat garis di HTML CSS.

Menggunakan Tag HR

Cara termudah untuk membuat garis horizontal dalam HTML adalah dengan menggunakan tag <hr>. Tag ini membuat garis horizontal yang bisa dipersonalisasi dengan CSS.

<hr>

Tag tersebut akan membuat garis horizontal sederhana. Namun, kamu bisa mengubah penampilan garis dengan menggunakan CSS.

Contoh:

hr {
    border: none;
    height: 1px;
    color: #333; 
    background-color: #333;
}

Pada contoh CSS di atas, kami menghilangkan border, mengatur tinggi menjadi 1px, dan mengubah warna garis menjadi warna abu-abu gelap.

Membuat Garis Vertikal Menggunakan Div

Sedangkan untuk membuat garis vertikal, kamu bisa menggunakan elemen <div> di CSS. Berikut contoh kodennya:

<div class="garis-vertical"></div>

Di dalam CSS, kamu bisa menambahkan properti dan styling seperti berikut:

.garis-vertical {
    border-left: 1px solid #333;
    height: 500px;
}

Dengan kode di atas, kamu bisa membuat garis vertikal dengan tinggi 500px dan warna garis abu-abu gelap.

Sebagai penutup, membuat garis di HTML CSS sebenarnya sangat mudah. Untuk garis horizontal, kamu bisa menggunakan tag <hr>, dan untuk garis vertikal, kamu cukup menggunakan <div>. Dengan sedikit modifikasi dengan CSS, kamu bisa mendapatkan garis dengan tampilan sesuai keinginan.