Cara Menggunakan border-style dan border-color CSS 3

Di artikel kali ini masih membahas seputar border di pada css, banyak sekali macam – macam border yang perlu teman – teman tahu seperti hal nya artikel kali yang akan membahas mengenai Cara Menggunakan border-style dan border-color CSS 3 dimana pada pembahasan kali ini kita akan membangun sebuah layout yang di hasilkan oleh border-color dan border-style masing – masing kegunaan ini tentu saja mempunyai arti tersendiri. Di bawah ini saya berikan penjelasannya




  • border-color (bagi memberikan warna di border)



Pada pengetikannya sama dengan pengetikan margin dan padding yaitu sesuai arah jarum jam yang di mulai top, right, bottom, dan left. Dan border-color dapat 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 berikutnya yaitu border-style yaitu bagi merubah wujud bordernya, dan nanti saya akan berikan penjelasannya. Pada pengetikannya pun pun sama dengan border-color di atas ini, nah di bawah ini review nya




  • border-top-style (merubah wujud boder bagian atas)



  • border-bottom-style (merubah wujud boder bagian bawah)



  • border-left-style (merubah wujud boder bagian kiri)



  • border-right-style (merubah wujud boder bagian kanan)




Kemudian macam – macam border-style mempunyai banyak jenis diantaranya




  • border-style: none (menghilangkan border)


  • border-style: dotted (memberikan wujud border titik – titik)


  • border-style: dashed; (memberikan wujud border terputus – putus)


  • border-style: solid; (memberikan wujud border solid)


  • border-style: double; (memberikan wujud double border)


  • dan masih banyak yang lainnya, umumnya banyak digunakan border style yang terdapat di atas ini



Bagus, kita akan praktekkan sesuai penjelasan di atas yang mana kita bahas di pada artikel Cara Menggunakan border-style dan border-color CSS 3. Teman – teman  siapkan text editornya dan coba ketikkan script seperti gambar di bawah ini





Karenanya akan menghasilkan seperti gambar di bawah ini





Teman – teman dapat lihat hasil di gambar di atas ini, warna berubah di top, bottom, left, right dan diantara nya ada yang berwarna hitam padahal tak diberikan warna hitam, jadi perlu teman – teman ketahui warna hitam yaitu warna default dari cssnya. Kemudian langkah berikutnya kita akan mengenal border-style teman – teman ikuti seperti gambar di bawah ini





Seperti yang kalian lihat di gambar di atas ini bagi pengetikkannya sama seperti yang saya jelaskan di atas, karenanya hasilnya sesuai jenis border-style nya





Bagaimana, apakah teman – teman telah paham..??



Oke, mungkin lumayan demikian di artikel kali ini mengenai Cara Menggunakan border-style dan border-color CSS 3 kita akan berjumpa kembali di artikel yang akan datang. Seandainya teman – teman masih bingung silahkan post komentarnya di bawah ini.



Terimakasih dan hingga jumpa, Semoga bermanfaat.




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more