CSS Border
Border merupakan garis tepi pada sebuah objek atau element. Border kita gunakan untuk menghiasi sebuah objek. Pada css kita bisa mengatur ini sama halnya pada photo editor.
Macam-macam border yang bisa kita gunakan :
dotted - Mendefinisikan border putus-putus dengan titik-titik
dashed - Mendefinisikan border putus-putus dengan garis-garis
solid - Mendefinisikan border yang solid (garis tanpa terputus)
double - Mendefinisikan border solid ganda (double)
groove - Mendefinisikan border beralur 3D. Efeknya tergantung pada nilai warna batas
ridge - Menentukan border bergerigi 3D. Efeknya tergantung pada nilai warna batas
inset - Mendefinisikan border inset 3D. Efeknya tergantung pada nilai warna batas
outset - Mendefinisikan border awal 3D. Efeknya tergantung pada nilai warna batas
none - Mendefinisikan tanpa border
hidden - Mendefinisikan border yang di sembunyikan
Untuk contohnya seperti di bawah ini :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.p-1{
border: dotted;
color: #669dff;
padding: 10px;
display: block;
}
.p-2{
border: dashed;
color: #669dff;
padding: 10px;
display: block;
}
.p-3{
border: solid;
color: #669dff;
padding: 10px;
display: block;
}
.p-4{
border: double;
color: #669dff;
padding: 10px;
display: block;
}
.p-5{
border: groove;
color: #669dff;
padding: 10px;
display: block;
}
.p-6{
border: ridge;
color: #669dff;
padding: 10px;
display: block;
}
.p-7{
border: inset;
color: #669dff;
padding: 10px;
display: block;
}
.p-8{
border: outset;
color: #669dff;
padding: 10px;
display: block;
}
.p-9{
border: none;
color: #669dff;
padding: 10px;
display: block;
}
.p-10{
border: hidden;
color: #669dff;
padding: 10px;
display: block;
}
</style>
<body>
<p class="p-1">Text ini memiliki border dengan tipe dotted</p>
<p class="p-2">Text ini memiliki border dengan tipe dashed</p>
<p class="p-3">Text ini memiliki border dengan tipe solid</p>
<p class="p-4">Text ini memiliki border dengan tipe double</p>
<p class="p-5">Text ini memiliki border dengan tipe groove</p>
<p class="p-6">Text ini memiliki border dengan tipe ridge</p>
<p class="p-7">Text ini memiliki border dengan tipe inset</p>
<p class="p-8">Text ini memiliki border dengan tipe outset</p>
<p class="p-9">Text ini memiliki border dengan tipe none</p>
<p class="p-10">Text ini memiliki border dengan tipe hidden</p>
</body>
</html>
Pada border kita bisa mengatur pada semua atau hampir semua element pada css. Selain tipe border di atas ada beberapa property border lainnya yaitu :
border-width = Mendefinisikan lebar/besarnya border
border-color = Mendefinisikan warna border
border-sides = Menggabungkan tipe border lainnya dalam satu element
rounded-border = Mendefinisikan lekukan sisi border
Contohnya seperti di bawah ini
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.p-1{
border: solid;
border-color: #669dff;
border-width: 4px;
border-radius: 15px 0 15px 0;
padding: 10px;
display: block;
}
/* shorthand (hanya tipe border, width, dan warna) */
.p-2{
border: solid 4px #669dff;
border-radius: 15px 0 15px 0;
padding: 10px;
display: block;
}
.p-3{
border-left: solid;
border-right: solid;
border-top: dashed;
border-bottom: dashed;
border-left-color: #29a847;
border-right-color: #29a847;
border-top-color: #e2ff44;
border-bottom-color: #e2ff44;
padding: 10px;
display: block;
}
</style>
<body>
<p class="p-1">Text ini memiliki border dengan kombinasi warna, width</p>
<p class="p-2">Text ini memiliki border dengan kombinasi warna, width (shorthand)</p>
<p class="p-3">Text ini memiliki border dengan kombinasi warna, rounded, dan tipe border campuran</p>
</body>
</html>
Sedikit membahas, untuk :
/* ... */ = itu digunakan untuk membuat komentar atau keterangan kepada sebuah kode agar mudah kita pahami maksud penulisan kode tersebut.
border-radius : 15px 0 15px 0; = Mengatur radius/lekukan dari sisi kiri kemudian searah dengan arah jarum jam. 15px (sisi kiri) 0 (sisi kanan) 15px (sisi bawah kanan) 0 (sisi bawah kiri).
Selamat mencoba...