Dito PriwantoPernah melihat elemen pada website yang memiliki garis tepi yang rapi dan menarik? Garis tersebut bukan hanya sebagai pemanis tampilan, tapi juga bisa membantu memisahkan konten agar lebih mudah dibaca. Nah, untuk membuat efek tersebut, Anda bisa menggunakan CSS border. Dalam sesi belajar CSS bagian 17 ini, kita akan belajar lebih alamn tentang pengertian, fungsi, cara kerja hingga cara kerja css border.
Sebelum memulai belajar css border, pastikan bahwa Anda telah membaca artikel sebelumnya tentang properti css yang bisa dilihat pada link berikut.
Apa itu Properti CSS Border
CSS border adalah properti CSS yang digunakan untuk menampilkan sebuah garis dalam setiap elemen HTML seperti garis tepi , garis pembatas, atau bingkai. Border ini berguna untuk menampilkan batas antar elemen HTML lain, dapat menambahkan estetika tampilan website, atau menampilkan bagian elemen tertentu dari halaman web.
Properti CSS border menyediakan berbagai jenis gaya border seperti solid, dashed, dotted, double, dan lainnya, serta memungkinkan pengaturan setiap sisi elemen secara terpisah menggunakan border-top, border-right, border-bottom, dan border-left. Dengan kombinasi yang tepat, border dapat membuat tampilan web menjadi lebih menarik dan terstruktur.
Fungsi Properti CSS Border
Properti CSS Border ini dapat digunakan untuk menampilkan garis untuk elemen HTML seperti teks, gambar, tombol, dan blok HTML pada konten lainnya sehingga elemen tersebut dapat terlihat lebih jelas, terpisah atau menonjol dengan elemen lainnya.
CSS border sering digunakan untuk mempertegas kotak konten seperti tombol, gambar, atau kontak elemen lain dalam bentuk card yang menyorot bagian penting dalam sebuah halaman web.
Selain itu dapat membantu dalam menyusun tata letak lebih rapi dan terorganisir serta meningkatkan pengalaman pengguna melalui tampilan yang mudah dipahami.
Cara Kerja
Dengan menggunakan properti CSS border, kita bisa mengatur:
- Lebar garis (thickness),
- Gaya garis (style), dan
- Warna garis (color) dari tepi elemen.
Contoh penulisan CSS border :
selector {
border: [lebar] [gaya] [warna];
}Contoh penerapan ke script CSS:
p {
border: 2px solid black;
}Dari kode CSS diatas pada tag p atau paragraf akan memiliki garis tepi berwarna hitam, tebal 2 piksel, dan bergaya solid (garis lurus penuh).
Berikut screenshootnya :
Properti border Lainnya (Spesifik per sisi):
Properti border dapat diatur lebih spesifik garis mana yang akan ditampilkan. Berikut adalah properti border lain yang dapat diterapkan.
- border-top untuk menambahkan garis di sebelah atas elemen
- border-right untuk menambahkan garis di sebelah kanan elemen
- border-bottom untuk menambahkan garis di sebelah bawah elemen
- border-left untuk menambahkan garis di sebelah kiri elemen
Contoh penulisan :
p {
border-top: 2px solid red;
border-left: 4px dashed blue;
}Berikut screenshoot nya :
Properti Tambahan
Selain itu, properti border memiliki properti lain agar terlihat lebih rapi dan terstruktur, Berikut adalah properti tambahan lain yang dapat diterapkan, seperti:
- border-width – mengatur ketebalan border.
- border-style – mengatur gaya border.
- border-color – mengatur warna border.
- border-radius – membuat sudut border membulat.
Contoh penulisan :
div {
border-color: red;
border-radius: 10px;
}Contoh Implementasi dan penggunaan
Berikut adalah contoh script lengkap penggunaan properti CSS border yang telah diterapkan ke kode html.
<!DOCTYPE html>
<html>
<head>
<title>Contoh CSS Border</title>
<style>
.container {
display: flex;
justify-content: center;
}
.container div {
margin: 10px;
padding: 10px;
background-color: #ffffff;
border: 1px solid #dadada;
border-radius: 10px;
width: 200px;
height: 300px;
}
body {
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box Satu</div>
<div class="box">Box Dua</div>
<div class="box">Box Tiga</div>
<div class="box">Box Empat</div>
</div>
</body>
</html>Dan jika diakses melalui browser, maka akan tampil seperti gambar berikut:
Kesimpulan
CSS border dapat digunakan untuk memberikan batas garis pada elemen HTML. Properti ini sangat berguna untuk meningkatkan tampilan desain dan menampilkan bagian tertentu sebagai pembatas dengan elemen HTML lain dari halaman web, seperti kotak peringatan, tombol, gambar, atau bagian penting lainnya.
Demikian artikel kami tentang mengenal css border pada sesi belajar CSS bagian 17. Ikuti terus sesi belajar CSS dari Rumahweb, untuk meningkatkan skill web desain Anda. Semoga bermanfaat.
