Belajar CSS bagian CSS Borders di W3SCHOOL
CSS Borders
1. Borders style
Properti border-style menentukan jenis perbatasan apa yang akan ditampilkan.
Nilai-nilai berikut yang diizinkan:
1. Dotted mendefinisikan perbatasan bertitik
2. Dashed mendefinisikan perbatasan putus-putus
3. Solid mendefinisikan sebuah perbatasan yang solid
4. Double mendefinisikan perbatasan ganda
5. Groove mendefinisikan sebuah perbatasan berlekuk 3D efeknya tergantung pada nilai border-color
6. Ridge mendefinisikan sebuah perbatasan bergerigi 3D efeknya tergantung pada nilai border-color
7. Inset mendefinisikan sebuah perbatasan inset 3D efeknya tergantung pada nilai border-color
8. Outset mendefinisikan sebuah perbatasan awal 3D efeknya tergantung pada nilai border-color
9. None mendefinisikan ada batas
10. Hidden mendefinisikan perbatasan tersembunyi
ini yang saya buat lewat text editor:
Properti border-width menentukan lebar empat perbatasan.
Lebar dapat diatur sebagai ukuran tertentu (dalam px, pt, cm, em, dll) atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan: tipis, sedang, atau tebal.
Ini yang saya jalankan lewat text editor:
3. Border Color
Properti border-warna yang digunakan untuk mengatur warna dari empat perbatasan.
warna dapat diatur oleh:
1. Nama - menentukan nama warna, seperti "merah"
2. Hex - menentukan nilai hex, seperti "# ff0000"
3. RGB - menentukan nilai RGB, seperti "rgb (255,0,0)"
4. Jelas
Properti border-color dapat memiliki dari satu sampai empat nilai (untuk perbatasan atas, batas kanan, batas bawah, dan perbatasan kiri).
Ini yang saya buat lewat text editor:
4. Border -Individual
Dari contoh di atas Anda telah melihat bahwa adalah mungkin untuk menentukan perbatasan yang berbeda untuk setiap sisi.
Ini yang saya buat lewat text editor:
Jika properti border-style memiliki empat nilai:
1. Border-style: dotted ganda padat putus-putus;
a. Batas atas dihiasi
b. Batas kanan solid
c. Batas bawah adalah ganda
d. Perbatasan kiri putus-putus
Jika properti border-style memiliki tiga nilai:
2. Border-style: dotted padat ganda;
a. Batas atas dihiasi
b. Perbatasan kanan dan kiri yang padat
c. Batas bawah adalah ganda
Jika properti border-style memiliki dua nilai:
3. Border-style: dotted padat;
a. Batas atas dan bawah yang putus-putus
b. Perbatasan kanan dan kiri yang padat
Jika properti border-style memiliki satu nilai:
4. Border-style: dotted;
a. Keempat perbatasan yang putus-putus
Properti border-style digunakan dalam contoh di atas. Namun, ia juga bekerja dengan perbatasan-lebar dan border-color.
5. Border-Shorthand Property
Seperti yang dapat Anda lihat dari contoh di atas, ada banyak sifat yang perlu dipertimbangkan ketika berhadapan dengan perbatasan.
Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti perbatasan individu dalam satu properti.
Properti border adalah properti singkatan untuk properti border individu berikut:
1. Border-width
2. Border-style (wajib)
3. Border-color
Ini yang saya edit lewat text editor:
