Pada artikel kali ini masih membahas seputar border di dalam css, banyak sekali macam – macam border yang perlu teman – teman tahu seperti hal nya artikel kali yang akan membahas tentang Cara Menggunakan border-style dan border-color CSS 3 dimana dalam pembahasan kali ini kita akan membuat sebuah layout yang di hasilkan oleh border-color dan border-style masing – masing fungsi ini tentu saja mempunyai arti tersendiri. Di bawah ini saya berikan penjelasannya
- border-color (untuk memberikan warna pada border)
Dalam pengetikannya sama dengan pengetikan margin dan padding yaitu sesuai arah jarum jam yang di mulai top, right, bottom, dan left. Dan border-color bisa kita tuliskan seperti di bawah ini
- border-top-color (merubah warna border bagian atas)
- border-bottom-color (merubah warna border bagian bawah)
- border-left-color (merubah warna border bagian kiri)
- border-right-color (merubah warna border bagian kanan)
Kemudian yang selanjutnya adalah border-style yaitu untuk merubah bentuk bordernya, dan nanti saya akan berikan penjelasannya. Dalam pengetikannya pun juga sama dengan border-color di atas ini, nah di bawah ini review nya
- border-top-style (merubah bentuk boder bagian atas)
- border-bottom-style (merubah bentuk boder bagian bawah)
- border-left-style (merubah bentuk boder bagian kiri)
- border-right-style (merubah bentuk boder bagian kanan)
Kemudian macam – macam border-style mempunyai banyak jenis diantaranya
- border-style: none (menghilangkan border)
- border-style: dotted (memberikan bentuk border titik – titik)
- border-style: dashed; (memberikan bentuk border terputus – putus)
- border-style: solid; (memberikan bentuk border solid)
- border-style: double; (memberikan bentuk double border)
- dan masih banyak yang lainnya, umumnya banyak digunakan border style yang ada di atas ini
Baik, kita akan praktekkan sesuai deskripsi di atas yang mana kita bahas di dalam artikel Cara Menggunakan border-style dan border-color CSS 3. Teman – teman siapkan text editornya dan coba ketikkan script seperti gambar di bawah ini
Maka akan menghasilkan seperti gambar di bawah ini
Teman – teman bisa lihat hasil pada gambar di atas ini, warna berubah pada top, bottom, left, right dan diantara nya ada yang berwarna hitam padahal tidak diberikan warna hitam, jadi perlu teman – teman ketahui warna hitam adalah warna default dari cssnya. Kemudian langkah berikutnya kita akan mengenal border-style teman – teman ikuti seperti gambar di bawah ini
Seperti yang kalian lihat pada gambar di atas ini untuk pengetikkannya sama seperti yang saya jelaskan di atas, maka hasilnya sesuai jenis border-style nya
Bagaimana, apakah teman – teman sudah mengerti..??
Oke, mungkin cukup sekian pada artikel kali ini tentang Cara Menggunakan border-style dan border-color CSS 3 kita akan berjumpa kembali di artikel yang akan datang. Jika teman – teman masih bingung silahkan post komentarnya di bawah ini.
Terimakasih dan sampai jumpa, Semoga bermanfaat.