Belajar Properti Border Pada CSS

Belajar Properti Border Pada CSS

Back again at JogjaXploit, setelah kemarin tidak posting artikel dikarenakan kesibukan duniawi, kali ini kita akan melanjutkan belajar CSS untuk pemula. Pada kali ini kita akan Belajar Properti Border pada CSS yang mana berguna sekali terlebih bagi kalian yang mendalami Web Developer atau pemrograman web.

Bagi kalian yang belum membaca materi pembelajaran sebelumnya, kalian dapat membaca nya terlebih dahulu.


Jika sudah, kita mulai saja pembelajaran CSS nya.

Border Pada CSS

Apa itu Border pada CSS?

Border merupakan sebuah bahasa inggris yang mana jika diartikan dalam bahasa indonesia memiliki arti batas / pinggir. Jadi, border pada CSS memiliki pengertian sebuah setelan atau pengaturan pada tampilan suatu Web atau website baik itu dari width ( lebar ) dan height ( tinggi ) nya.

Setelah kita paham mengenai apa itu Border pada CSS, kita lanjut pada contohnya ya, biar kalian mengerti seperti apa itu border.

Contohnya


Gambar di atas merupakan beberapa contoh hasil dari suatu elemen yang di berikan properti Border.

Kalian juga dapat menambahkan style atau gaya pada Border CSS nya.

Bagaimana caranya?

Caranya cukup mudah, kalian dapat memberikan kode border-style dan menambahkan nilai / value nya untuk menambahkan style pada Border CSS kalian.

Berikut merupakan nilai / value nya.

1. Dotted - Memberikan border dot atau titik titik
2. Dashed - Memberikan border dengan garis putus-putus
3. Solid - Memberikan border dengan garis solid
4. Double - Memberikan border dengan dua garis / double garis
5. Groove - Memberikan border dengan efek yang beralur 3 dimensi. Efek nya tergantung dari nilai warna border nya
6. Ridge - Memberikan border dengan efek bergerigi 3 dimensi. Efek nya juga tergantunug pada nilai warna border nya
7. Inset - Menentukan batas inset 3 dimensi
8. Outset - Menentukan batas awal 3 dimensi pada border
9. None - Tidak memberikan border / pembatas
10. Hidden - Memberikan border yang mana tidak terlihat atau memberikan border yang tidak terlihat

Diatas merupakan jenis-jenis style yang ada pada properti border. Untuk hasil dari jenis-ienis style diatas, dapat kalian lihat gambar nya di bawah ini.

Contoh jenis style pada border


Menarik bukan?. Jika kalian sudah mengenal dan paham dengan jenis-jenis style nya, kita lanjut mengenai bagaimana cara penulisannya.

Cara penulisan kode untuk memberikan style pada border CSS nya dapat kalian lihat di bawah ini.

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Penjelasan :

P merupakan sebuah elemen pada HTML kalian, yang mana akan kalian berikan border nya. Kalian bisa memberikan border nya pada elemen mana saja yang kalian inginkan. Seperti Body, Form, dan lain sebagainya.

Selesai...

Mudah bukan? iya mudah. Tidak perlu belajar lama, kami yakin kalian sudah paham dengan Properti border ini.

Mungkin cukup sekian artikel mengenai Belajar Border pada CSS kali ini. Jika ada yang ingin ditanyakan silahkan bertanya melalui kolom komentar. Terima kasih dan sampai jumpa.

Silahkan Bertanya atau Beri Tanggapannya, Terima Kasih

Posting Komentar

Silahkan Bertanya atau Beri Tanggapannya, Terima Kasih

Post a Comment (0)

Lebih baru Lebih lama

ads

ads