.jpeg)
Border adalah sebuah garis yang terdapat di pinggir atau di tepi konten atau gambar yang kita buat. Salah satu fungsi dari border adalah agar tampilan lebih menarik dari tampilan lainnya. Border dalam CSS dapat kita atur style nya, mulai dari lebar (width), warna (color), dan dari segi tampilan lainnya. Berikut ini adalah tutorialnya.
Border dalam CSS
Di dalam CSS, kita bisa membuat sebuah border dengan berbagai style. Contohnya kita bisa merubah lebar (width), warna (color), bentuk garis tepi dan bulat pada garis tepi (rounded). Kita akan membahas nya secara satu per satu agar kita semua lebih mudah memahami nya.
1. Border Style
Yang pertama adalah border style. Nah border style ini sangat penting dan menjadi hal utama dalam pembuatan border dalam CSS. Tanpa adanya border style ini, kita akan bingung border apa yang akan kita buat. Berikut ini adalah keterangan dari beberapa style :
- Dotted - Untuk garis putus putus
- Dashed - Untuk garis putus putus
- Solid - Untuk garis solid (bergaris normal)
- Double - Untuk garis ganda
- Groove - Untuk garis beralur 3D. Efeknya bergantung pada warna border
- Ridge - Untuk garis bergerigi 3D. Efeknya bergantung pada warna border
- Inset - Untuk menentukan batas inset 3D. Efeknya bergantung pada warna border
- Outset - Untuk menentukan batas outset 3D. Efeknya bergantung pada warna border
- None - Untuk menyatakan tidak memiliki border
- Hidden - Untuk menyatakan border tersembunyi
Contoh penulisan codingan nya seperti dibawah ini
<html>
<head>
<title> Border dalam CSS </title>
<style>
.dotted {border-style: dotted;}
.dashed {border-style: dashed;}
.solid {border-style: solid;}
.double {border-style: double;}
.groove {border-style: groove;}
.ridge {border-style: ridge;}
.inset {border-style: inset;}
.outset {border-style: outset;}
.none {border-style: none;}
.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="dotted">Ini adalah contoh border dengan dotted</p>
<p class="dashed">Ini adalah contoh border dengan dashed</p>
<p class="solid">Ini adalah contoh border dengan solid</p>
<p class="double">Ini adalah contoh border dengan double</p>
<p class="groove">Ini adalah contoh border dengan groove</p>
<p class="ridge">Ini adalah contoh border dengan ridge</p>
<p class="inset">Ini adalah contoh border dengan inset</p>
<p class="outset">Ini adalah contoh border dengan outset</p>
<p class="none">Ini adalah contoh border dengan none</p>
<p class="hidden">Ini adalah contoh border dengan hidden</p>
</body>
</html>Hasilnya seperti dibawah ini
2. Border Width
Yang kedua adalah lebar border. Nah dengan menggunakan width, kita bisa mengatur lebar dari border yang kita buat. Tapi saya sarankan jika menggunakan width untuk border, sebaiknya width nya jangan terlalu lebar. Karena jika terlalu lebar, maka hasilnya pun kurang bagus. Lebar border dapat kita atur menjadi ukuran tertentu (px, pt, cm, em, dan lainnya). Berikut ini adalah contoh codingan nya
<html>
<head>
<title> Border dalam CSS </title>
<style>
.dotted {border-style: dotted; border-width: 3px;}
.dashed {border-style: dashed; border-width: medium;}
.solid {border-style: solid; border-width: thick;}
.double {border-style: double; border-width: thin;}
.groove {border-style: groove; border-width: 3pt;}
</style>
</head>
<body>
<p class="dotted">Ini adalah contoh border dengan dotted</p>
<p class="dashed">Ini adalah contoh border dengan dashed</p>
<p class="solid">Ini adalah contoh border dengan solid</p>
<p class="double">Ini adalah contoh border dengan double</p>
<p class="groove">Ini adalah contoh border dengan groove</p>
</body>
</html>
3. Border Color
Sekarang kita akan membahas ke bagian border color (border berwarna). Dengan menggunakan border color, kita bisa mengubah warna sesuai keinginan kita sendiri. Tujuan dari pemberian warna pada border adalah agar memiliki tampilan yang menarik. Kita bisa menggunakan semua jenis warna, mulai dari RGB, HEX ataupun menggunakan nama warna nya. Jika kamu tidak mengetahui jenis warna yang cocok atau tidak mengetahui kode warna nya, kamu bisa melihat Kode Warna HTML dan CSS. Berikut ini adalah contoh codingan nya.
<html>
<head>
<title> Border dalam CSS </title>
<style>
.dotted {border-style: dotted; border-color: red;}
.dashed {border-style: dashed; border-color: yellow;}
.solid {border-style: solid; border-color: green;}
.double {border-style: double; border-color: #FFA500;}
.groove {border-style: groove; border-color: blue;}
.ridge {border-style: ridge; border-color: rgb(63, 255, 0);}
</style>
</head>
<body>
<p class="dotted">Ini adalah contoh border dengan dotted</p>
<p class="dashed">Ini adalah contoh border dengan dashed</p>
<p class="solid">Ini adalah contoh border dengan solid</p>
<p class="double">Ini adalah contoh border dengan double</p>
<p class="groove">Ini adalah contoh border dengan groove</p>
<p class="ridge">Ini adalah contoh border dengan ridge</p>
</body>
</html>
4. Border Sides
Border Sides bisa kita sebut juga sebagai border campuran. Bagaimana maksudnya border campuran ? Jadi border campuran adalah border yang di setiap sisi nya berbeda. Contoh nya kita menggunakan border-top-style untuk bagian atas border, border-left-style untuk bagian kiri, border-bottom-style untuk bagian bawah, dan border-right-style untuk bagian kanan nya. Contoh codingan nya seperti dibawah ini
<html>
<head>
<title> Border dalam CSS </title>
<style>
.dotted {
border-top-style: dotted;
border-left-style: solid;
border-bottom-style: double;
border-right-style: dashed;
}
.dashed {
border-top-style: double;
border-left-style: dotted;
border-bottom-style: solid;
border-right-style: groove;
}
.solid {
border-top-style: ridge;
border-left-style: solid;
border-bottom-style: double;
border-right-style: dotted;
}
.double {
border-top-style: hidden;
border-left-style: none;
border-bottom-style: double;
border-right-style: solid;
}
.groove {
border-top-style: dashed;
border-left-style: double;
border-bottom-style: hidden;
border-right-style: dotted;
}
.ridge {
border-top-style: ridge;
border-left-style: double;
border-bottom-style: dashed;
border-right-style: groove;
}
</style>
</head>
<body>
<p class="dotted">Ini adalah contoh border dengan campuran</p>
<p class="dashed">Ini adalah contoh border dengan campuran</p>
<p class="solid">Ini adalah contoh border dengan campuran</p>
<p class="double">Ini adalah contoh border dengan campuran</p>
<p class="groove">Ini adalah contoh border dengan campuran</p>
<p class="ridge">Ini adalah contoh border dengan campuran</p>
</body>
</html>/
5. Border Rounded
Dengan menggunakan border, kita membuat lengkungan (radius) pada border. Untuk menggunakan Border Rounded, kita menggunakan syntax border-radius. Contoh codingan nya seperti dibawah ini
<html>
<head>
<title> Border dalam CSS </title>
<style>
.dotted {border-style: dotted; border-radius: 5px;}
.dashed {border-style: dashed; border-radius: 5px;}
.solid {border-style: solid; border-radius: 5px;}
.double {border-style: double; border-radius: 5px;}
.groove {border-style: groove; border-radius: 5px;}
.ridge {border-style: ridge; border-radius: 5px;}
</style>
</head>
<body>
<p class="dotted">Ini adalah contoh border dengan dotted</p>
<p class="dashed">Ini adalah contoh border dengan dashed</p>
<p class="solid">Ini adalah contoh border dengan solid</p>
<p class="double">Ini adalah contoh border dengan double</p>
<p class="groove">Ini adalah contoh border dengan groove</p>
<p class="ridge">Ini adalah contoh border dengan ridge</p>
</body>
</html>
Sekian materi mengenai Border dalam CSS, kamu juga bisa membuat border lainnya sesuai dengan keinginan kalian sendiri. Contohnya kamu bisa menambahkan border-color pada border-radius. Caranya sama seperti diatas. Semoga tutorial ini bermanfaat dan jika ada yang kurang paham, silahkan bertanya pada kolom komentar yang telah tersedia. Sekian dan terimakasih.