Cara Membuat Garis Tepi dengan Berbagai Gaya Menggunakan Kode CSS

Membuat Garis Tepi dengan CSS merupakan salah satu teknik yang sering digunakan untuk mempercantik tampilan web. Property CSS yang paling umum digunakan yaitu properti 'border', namun Anda juga bisa menggunakan properti lain seperti border-style, border-color, border-radius, dsb.

Daftar isi

1. Border-Style

property border-style merupakan property CSS yang digunakan untuk memberi garis tepi dengan style sesuai dengan value yang dipilih. Berikut ini beberapa value atau nilai dari property border-style :

Daftar Tabel untuk Border-Style
NoValueDeskripsi
1dashedgaris tepi dengan style putus-putus
2dottedgaris tepi dengan style bertitik
3doublegaris tepi dengan style ganda
4groovegaris tepi dengan style groove, Efeknya akan terlihat tergantung dari warna border.
5hiddengaris tepi dengan gaya tersembunyi
6insetgaris tepi dengan style inset 3D, Efeknya akan terlihat tergantung dari warna border.
7nonetidak menentukan garis tepi
8outsetgaris tepi dengan gaya outset(batas awal 3D). Efeknya akan terlihat tergantung dari warna border.
9ridgegaris tepi dengan style bergerigi(3D). Efeknya akan terlihat tergantung dari warna border.
10solidgaris tepi dengan style solid

Setelah Anda mengetahui beberapa value yang tersedia untuk properti border-style, selanjutnya siapkan text editor seperti notepad, sublime, dsb kemudian tulis ulang atau copy paste script kode dibawah ini dan jalankan pada web browser :

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Contoh Border-Style </title>
        <style>
            .solid{
                border-style: solid;
            }
            .dashed{
                border-style: dashed;
            }
        </style>
    </head>
    
    <body>
        <h1 class="solid"> Garis tepi dengan style solid </h1>
        <h1 class="dashed"> Garis tepi dengan style putus-putus </h1>
    </body>
    
</html>

Jika Kode Script diatas tidak ada Error, Berikut Screenshot dari contoh kode diatas jika ditampilkan pada halaman web :

contoh membuat border-style (garis tepi dengan gaya) menggunakan kode cs
Gambar 1

2. Border-Width

Property border-width merupakan property CSS yang digunakan untuk menentukan lebar pada garis tepi. Penggunaan properti tersebut tidak akan berfungsi jika tidak ditulis bersamaan dengan properti border-style. berikut ini value dari properti tersebut :

Daftar Tabel untuk Border-Width
NoValueDeskripsi
1px, em, cm, dllmenentukan lebar border berdasarkan ukuran. misal 1px, 0.3125em, 0.5cm, dsb
2thinmenentukan lebar border dengan ukuran Tipis.
3mediummenentukan lebar border dengan ukuran Sedang.
4thickmenentukan lebar border dengan ukuran Tebal.

Untuk menentukan lebar border sesuai dengan yang diinginkan, Anda bisa menggunakan value berdasarkan ukuran seperti px, em, dsb. berikut ini contoh script kode menggunakan border-width dengan value ukuran px dan em :

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Contoh Border-Width </title>
        <style>
            .px{
                border-style: solid;
                border-width: 10px;
            }
            .em{
                border-style: dashed;
                border-width: 0.3125em;
            }
        </style>
    </head>
    
    <body>
        <h1 class="px"> Garis tepi dengan lebar 10px dan style solid </h1>
        <h1 class="em"> Garis tepi dengan lebar 0.3125em dan style putus-putus </h1>
    </body>
    
</html>

Jika Kode Script diatas tidak ada Error, Berikut Screenshot dari contoh kode diatas jika ditampilkan pada halaman web :

contoh membuat border-width (garis tepi dengan lebar yang ditentukan) menggunakan kode cs
Gambar 2

3. Border-Color

Property border-color merupakan property CSS yang digunakan untuk memberi warna pada garis tepi. sama halnya dengan border-width, border-color ditulis bersamaan dengan border-style. Properti ini mempunyai beberapa Nilai antara lain: color, RGBA, HEX, HSLA, dsb.

Daftar Tabel untuk Border-Color
NoJenis ValueValue
1colorred, blue, black, olive, teal, navy, lime, dsb
2Hexadecimal#FF0000, #00FF00, #0000FF, #000000, dsb
3red-green-blue 'rgb()'rgba(255,0,0), rgba(0%,50%,100%), rgba(0,0,255), dsb
4red-green-blue-alpha 'rgba()'rgba(255,0,0,1), rgba(0%,100%,50%,1), rgba(0,0,255,0.5), dsb
5Hue-saturation-lightness 'hsl()'hsl(360,100%,50%), hsl(240,75%,50%), dsb
6Hue-saturation-lightness-alpha 'hsla()'hsla(360,100%,50%,0.1), dsb

Untuk memilih warna dari garis tepi bagi yang baru belajar, saya sarankan untuk menggunakan jenis value 'color' dengan nilai seperti red, blue, black, dsb, dikarenakan akan lebih mudah diingat. berikut contoh sript kodenya :

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Contoh Border-Color </title>
        <style>
            .color{
                border-style: solid;
                border-width: 1px;
                border-color: blue;
            }
            .rgba{
                border-style: dashed;
                border-width: 2px;
                border-color: rgba(0,255,0,1);
            }
            .hex{
                border-style: double;
                border-width: 3px;
                border-color: #FF0000;
            }
        </style>
    </head>
    
    <body>
        <h1 class="color"> Garis tepi dengan warna biru dan style solid </h1>
        <h1 class="rgba"> Garis tepi dengan warna rgba(hijau) dan style putus-putus </h1>
        <h1 class="hex"> Garis tepi dengan warna HEX(Merah) dan style double </h1>
    </body>
    
</html>

Jika Kode Script diatas tidak ada Error, Berikut Screenshot dari contoh kode diatas jika ditampilkan pada halaman web :

contoh membuat border-color (garis tepi dengan dengan warna) menggunakan kode cs
Gambar 3

4. Border

Property border merupakan property CSS yang sering digunakan dengan tujuan mempersingkat penulisan kode CSS. Anda tidak perlu menulis property border-width, border-style, dan border-color secara bersamaan, Anda hanya perlu menulis nilainya saja dari ketiga properti tersebut.

Penulisan value atau nilai dari properti border mengharuskan berisi 3 nilai, yang secara urut yaitu width, style, color. Berikut contoh script kodenya :

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Contoh Border </title>
        <style>
            h1{
                border: 2px solid red;
            }
        </style>
    </head>
    
    <body>
        <h1> Garis Tepi dengan lebar 2px, style solid, dan warna merah </h1>
    </body>
    
</html>

Berikut Hasil Screenshot dari contoh kode diatas jika ditampilkan pada halaman web browser :

contoh membuat border(garis tepi) menggunakan kode cs
Gambar 4

5. Border-radius

Properti border-radius merupakan property CSS yang bisa Anda gunakan untuk membentuk sudut bulat pada suatu elemen atau selector. Anda juga bisa menentukan ukuran pada tiap sudutnya dengan berbeda-beda. Properti tersebut memiliki value dari satu hingga empat nilai. berikut penjelasan untuk valuenya :

Daftar Tabel untuk Border-radius
NoValueDeskripsi
110px(1 nilai) value yang ditentukan membentuk sudut bulat pada keempat sudut
25px 20px(2 nilai) value pertama membentuk sudut bulat pada sudut atas-kiri dan bawah-kanan, value kedua pada sudut atas-kanan dan bawah-kiri.
35px 20px 10px(3 nilai) value pertama membentuk sudut bulat untuk atas-kiri, value kedua untuk atas-kanan dan bawah-kiri, dan value ketiga membentuk sudut bulat pada bawah-kanan.
45px 10px 20px 30px(4 nilai) value pertama membentuk sudut bulat pada atas-kiri, value kedua pada atas-kanan, value ketiga pada bawah-kanan, dan value keempat membentuk sudut bulat pada bawah-kiri

dari keempat jenis Value pada tabel diatas, jenis value dengan 1 nilai dan 4 nilai yang sering saya gunakan untuk mendesaign suatu elemen Html. berikut contoh penerapan dari dua jenis value yang sering saya gunakan :

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Contoh Border </title>
        <style>
            .satu-nilai{
                border: 2px solid red;
                border-radius: 15px;
            }
            .empat-nilai{
                border: 2px solid red;
                border-radius: 5px 10px 20px 30px;
            }
        </style>
    </head>
    
    <body>
        <h1 class="satu-nilai">
            Garis Tepi dengan radius 10px pada keempat sudut.
        </h1>
        <h1 class="empat-nilai">
            Garis Tepi dengan radius 5px pada sudut atas sebelah kiri,
            10px pada sudut atas sebelah kanan, 20px pada sudut bawah
            sebelah kanan, dan 30px pada sudut bawah sebelah kiri.
        </h1>
    </body>
    
</html>

Penjelasan dari Script kode diatas, Selector pertama yaitu class 'satu-nilai' yang berisi border-radius dengan value 15px. Artinya, secara otomatis keempat sudut/tiap sudutnya akan membentuk sudut bulat dengan ukuran 10px.

Selector kedua yaitu class 'empat-nilai' yang berisi border-radius dengan value 5px 10px 20px 30px. Artinya, pada sudut atas-kiri diatur 5px, sudut atas-kanan diatur 10px, sudut bawah-kanan diatur 20px, dan sudut bawah-kiri diatur dengan ukuran 30px. Berikut tampilan pada halaman web :

contoh membuat border-radius menggunakan kode cs
Gambar 5