Pada tutorial ini kita akan membahas tentang manipulasi border dengan menggunakan
CSS .CSS memungkinkan kita untuk memanipulasi atau mengubah ukuran, warna, dan gaya atau
bentuk pada border. Misalnya border yang berbentuk titik-titik, strip dan yang bermodel biasa
saja .
untuk contoh mengubah border dengan CSS silahkan simak penjelasan berikut ini.
Mengubah Border Style
Pada CSS terdapat banyak gaya atau model untuk membuat garis. Ada yang berbentuk
titik-titik, berbentuk garis yang putus-putus, garis ganda dan banyak lagi style/gaya yang bisa di
gunakan pada garis dengan CSS . untuk membuat garis sekaligus memberikan value style yang
kita inginkan kita bisa menggunakan property css border-style. silahkan perhatikan contoh di
bawah ini.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Border style CSS www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="garis_1">Garis dengan gaya solid</p>
<p id="garis_2">Garis dengan gaya dotted</p>
<p id="garis_3">Garis dengan gaya dashed</p>
<p id="garis_4">Garis dengan gaya double</p>
<p id="garis_5">Garis dengan gaya groove</p>
<p id="garis_6">Garis dengan gaya inset</p>
<p id="garis_7">Garis dengan gaya outset</p>
<p id="garis_8">Garis dengan gaya ridge</p>
</body>
</html>
style.css
#garis_1{
border-style:solid;
}
#garis_2{
border-style: dotted;
}
#garis_3{
border-style: dashed;
}
#garis_4{
border-style: double;
}
#garis_5{
border-style: groove;
}
#garis_6{
border-style: inset;
}
#garis_7{
border-style: outset;
}
#garis_8{
border-style: ridge;
}
Berikut adalah contoh border-style saat di jalankan pada browser
contoh border
Sumber :
.png)
Komentar
Posting Komentar