Close Menu
Forum

Cara Membuat Garis di CSS

Analis WinterBy
Cara Membuat Garis di CSS

Berikut adalah artikel tutorial tentang cara membuat garis di CSS. Artikel ini membahas berbagai cara menambahkan garis pada halaman web dengan menggunakan CSS.

Membuat garis atau divider di CSS dapat dilakukan dengan beberapa cara yang fleksibel dan mudah. Dalam tutorial ini, kita akan membahas beberapa cara umum untuk membuat garis dengan menggunakan properti CSS sederhana.

Tutorial CSS: Cara Membuat Garis di CSS

1. Menggunakan Elemen <hr>

Tag <hr> adalah elemen HTML khusus untuk membuat garis horizontal. Untuk memodifikasi tampilannya, kita dapat menggunakan CSS.

Contoh Kode:

<hr class="garis">
.garis {
    border: none;
    border-top: 2px solid #333;
    margin: 20px 0;
}

Penjelasan:

  • border-top menentukan warna dan ketebalan garis.
  • margin menambahkan jarak di sekitar garis, membuat tampilannya lebih rapi.

2. Menggunakan Border di Elemen <div>

Jika kalian ingin lebih fleksibel, kalian bisa menggunakan elemen <div> dengan border untuk membuat garis.

Contoh Kode:

<div class="garis-horiz"></div>
.garis-horiz {
    border-top: 2px solid #333;
    width: 100%;
    margin: 20px 0;
}

Penjelasan:

  • width: 100% membuat garis sepanjang kontainer induk.
  • border-top menentukan gaya dan ketebalan garis.

3. Membuat Garis Vertikal

Untuk garis vertikal, kalian dapat menggunakan border-left atau border-right pada elemen <div>. Biasanya, ini berguna untuk layout dua kolom.

Contoh Kode:

<div class="garis-vert"></div>
.garis-vert {
    border-left: 2px solid #333;
    height: 100px;
    margin: 0 20px;
}

Penjelasan:

  • height menentukan tinggi garis vertikal.
  • border-left digunakan untuk membuat garis di sisi kiri.

4. Garis dengan Gradien Warna

Menggunakan gradien untuk garis dapat membuat tampilan menjadi lebih menarik. Kalian dapat menggunakan background-image dengan linear-gradient.

Contoh Kode:

<div class="garis-gradien"></div>
.garis-gradien {
    height: 2px;
    background-image: linear-gradient(to right, #ff7e5f, #feb47b);
    width: 100%;
    margin: 20px 0;
}

Penjelasan:

  • linear-gradient memberikan efek warna gradien pada garis.
  • width dan height mengatur panjang dan ketebalan garis.

5. Garis Putus-Putus atau Titik-Titik

Jika kalian membutuhkan variasi seperti garis putus-putus atau titik-titik, kalian bisa menggunakan border-style.

Contoh Kode:

<div class="garis-dotted"></div>
<div class="garis-dashed"></div>
.garis-dotted {
    border-top: 2px dotted #333;
    width: 100%;
    margin: 20px 0;
}

.garis-dashed {
    border-top: 2px dashed #333;
    width: 100%;
    margin: 20px 0;
}

Penjelasan:

  • border-top: dotted menghasilkan garis titik-titik.
  • border-top: dashed menghasilkan garis putus-putus.

Contoh Implementasinya dalam HTML Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Pelajari cara membuat garis di CSS dengan berbagai metode, termasuk menggunakan hr, border pada div, gradien warna, dan garis putus-putus.">
    <title>Cara Membuat Garis di CSS</title>
    <style>
        /* Gaya untuk garis <hr> */
        .garis {
            border: none;
            border-top: 2px solid #333;
            margin: 20px 0;
        }

        /* Gaya untuk garis horizontal dengan <div> */
        .garis-horiz {
            border-top: 2px solid #333;
            width: 100%;
            margin: 20px 0;
        }

        /* Gaya untuk garis vertikal */
        .garis-vert {
            border-left: 2px solid #333;
            height: 100px;
            margin: 0 20px;
        }

        /* Gaya untuk garis dengan gradien warna */
        .garis-gradien {
            height: 2px;
            background-image: linear-gradient(to right, #ff7e5f, #feb47b);
            width: 100%;
            margin: 20px 0;
        }

        /* Gaya untuk garis putus-putus dan titik-titik */
        .garis-dotted {
            border-top: 2px dotted #333;
            width: 100%;
            margin: 20px 0;
        }

        .garis-dashed {
            border-top: 2px dashed #333;
            width: 100%;
            margin: 20px 0;
        }
    </style>
</head>
<body>

    <h1>Tutorial CSS: Cara Membuat Garis di CSS</h1>

    <h2>1. Menggunakan Elemen &lt;hr&gt;</h2>
    <hr class="garis">

    <h2>2. Menggunakan Border di Elemen &lt;div&gt; sebagai Garis Horizontal</h2>
    <div class="garis-horiz"></div>

    <h2>3. Membuat Garis Vertikal</h2>
    <div class="garis-vert"></div>

    <h2>4. Garis dengan Gradien Warna</h2>
    <div class="garis-gradien"></div>

    <h2>5. Garis Putus-Putus dan Titik-Titik</h2>
    <div class="garis-dotted"></div>
    <div class="garis-dashed"></div>

</body>
</html>
Demo

Dengan berbagai cara di atas, kalian bisa membuat garis horizontal dan vertikal sesuai dengan kebutuhan desain kalian di CSS. Selain memperindah tampilan, garis juga bisa menjadi elemen penting untuk memisahkan konten dalam sebuah halaman. Sekian dari analiswinter.com terimakasih.

Share.

Related Posts

Add A Comment
Leave A Reply