CARA MEMBUAT GARIS DI CSS

Membuat garis di CSS adalah salah satu skill yang sangat berguna untuk setiap developer web. Banyak sekali kasus di mana kamu mungkin ingin menambahkan garis sebagai elemen desain di situs web kamu. Oleh karena itu, mari kita pelajari cara membuat garis di CSS.

Metode 1: Menggunakan Border

Salah satu metode termudah dan paling umum untuk membuat garis di CSS adalah dengan menggunakan atribut border. Biasanya, ini digunakan untuk membuat garis pembatas sekeliling elemen HTML. Tapi, kamu juga bisa menggunakannya untuk membuat garis horisontal atau vertikal. Berikut adalah cara melakukannya:

Langkah 1: Memilih Elemen HTML

Pertama, kamu harus memilih elemen HTML di mana kamu ingin menambahkan garis.

<div id="garis"></div>

Langkah 2: Menambahkan Border di CSS

Sekarang, kamu harus menambahkan kode CSS berikut untuk membuat garis.

#garis{
    border-top: 2px solid black;
}

Dalam kode di atas, ‘border-top’ menandakan bahwa kita akan membuat garis di bagian atas elemen. ‘2px’ adalah ketebalan garis, ‘solid’ adalah tipe garis, dan ‘black’ adalah warna garis.

Metode 2: Menggunakan HR

Tag ‘hr’ adalah tag HTML yang digunakan khusus untuk membuat garis horisontal. Berikut cara penggunaannya:

<hr>

Namun, biasanya garis yang dihasilkan dari tag ‘hr’ ini terlihat terlalu tipis. Jadi, kamu bisa menambahkan CSS untuk merubah penampilannya, seperti ini:

hr{
    border: none;
    height: 2px;
    background-color: black;
}

Dengan CSS di atas, kamu bisa membuat garis yang lebih tebal dan bisa merubah warna sesuai keinginan.

Jadi, itulah dua metode yang bisa kamu gunakan untuk membuat garis di CSS. Jangan takut untuk bereksperimen dengan atribut dan nilai yang berbeda untuk mendapatkan tampilan yang kamu inginkan. Semoga artikel ini dapat membantu kamu belajar lebih banyak tentang CSS. Selamat mencoba!