Wednesday , December 2 2020
Home » CSS » Merubah Border Dengan CSS

Merubah Border Dengan CSS

Merubah Border Dengan CSS

lebakcyber.net – Merubah border dengan CSS. Oke jadi pada kesempatan kali ini kita akan membahas mengeanai bagaimana cara membuat border dengan menggunakan CSS.

CSS sendiri memungkinkan kita untuk dapat melakukan manipulasi seperti berubah warna, ukuran dan juga bentuk atau gaya pada sebuah border. Contohnya border yang memiliki bentuk strip, titik-titik dan juga yang memiliki model biasa saja.

Jadi langsung saja kita bahas bagaimana cara menggunakan CSS untuk dapat merubah suatu border.

Advertisements

Style Border

Di CSS sendiri ada banyak model atau gaya yang dapat digunakan untuk membaut sebuah garis. Contohnya ada yang berbentuk garis putus-putus, titik-titik dan juga masih banyak lagi style yang dapat digunakan pada garis dengan memanfaatkan CSS.

Agar bisa membuat sebuah baris dan juga memberikan value style sesuai dengan yang kita inginkan, kita dapat menggunakan property border-style pada CSS.

Advertisements

Untuk mempraktekannya silahkan buat file style.css dan juga index.html lalu masukan perintahnya seperti yang ada dibawah ini :

style.css

#border_1{
    border-style:solid;
}
#border_2{
    border-style: dotted;
}
#border_3{
    border-style: dashed;
}
#border_4{
    border-style: double;
}
#border_5{
    border-style: groove;
}
#border_6{
    border-style: inset;
}
#border_7{
    border-style: outset;
}
#border_8{
    border-style: ridge;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Border dengan CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>lebakcyber.net</p>
    <p id="border_1">Garis dengan style solid</p>
    <p id="border_2">Garis dengan style dotted</p>
    <p id="border_3">Garis dengan style dashed</p>
    <p id="border_4">Garis dengan style double</p>
    <p id="border_5">Garis dengan style groove</p>
    <p id="border_6">Garis dengan style inset</p>
    <p id="border_7">Garis dengan style outset</p>
    <p id="border_8">Garis dengan style ridge</p>
</body>
</html>

Nanti hasilnya akan seperti gambar dibawah ini :

Merubah Border Dengan CSS

Mengatur Ukuran dan Warna Pada Border

Selain itu dengan menggunakan CSS juga kita dapat melakukan pengaturan ukuran dan juga warna pada border dengan menggunakan property border-width dan juga border-color.

Sekarang kita coba praktekan untuk membuat pengaturan ukuran dan juga warna border dengan menggunakan CSS, silahkan buat file style.css dan juga index.html lalu masukan perintah dibawah ini :

style.css

#border_1{
    border-style:solid;
    border-width: 10px;
    border-color:red;
}
#border_2{
    border-style: dotted;
    border-width: 15px;
    border-color:blue;
}
#border_3{
    border-style: dashed;
    border-width: 20px;
    border-color:yellow;
}
#border_4{
    border-style: double;
    border-width: 25px;
    border-color:green;
}
#border_5{
    border-style: groove;
    border-width: 3px;
    border-color:violet;
}
#border_6{
    border-style: inset;
    border-width: 35px;
    border-color:black;
}
#border_7{
    border-style: outset;
    border-width: 40px;
    border-color:#333666;
}
#border_8{
    border-style: ridge;
    border-width: 45px;
    border-color:#444333;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Border dengan CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>lebakcyber.net</p>
    <p id="border_1">Garis dengan style solid</p>
    <p id="border_2">Garis dengan style dotted</p>
    <p id="border_3">Garis dengan style dashed</p>
    <p id="border_4">Garis dengan style double</p>
    <p id="border_5">Garis dengan style groove</p>
    <p id="border_6">Garis dengan style inset</p>
    <p id="border_7">Garis dengan style outset</p>
    <p id="border_8">Garis dengan style ridge</p>
</body>
</html>

Nanti hasilnya seperti gambar dibawah ini :

Merubah Border Dengan CSS

Oke jadi seperti itulah bagaimana cara memberikan style pada sebuah border dengan menggunakan CSS. Semoga tutorial sederhana ini dapat bermanfaat dan sampai jumpa di tutorial belajar CSS selanjutnya.

About Firdan Ardiansyah

Admin di lebakcyber.net Untuk berhubungan dengan saya, silahkan kirim email ke : firdan@lebakcyber.net

Check Also

merubah list dengan css

Merubah List Dengan CSS

Merubah List Dengan CSS lebakcyber.net – Merubah list dengan CSS. Setelah beberapa postingan sebelumnya yang …

Leave a Reply

Your email address will not be published. Required fields are marked *