Belajar CSS bagian CSS Borders di W3SCHOOL

Posted by Labels: at

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:
ini yang dijalankan lewat web browser:
2. Borders width

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:
Ini yang saya jalankan lewat web browser:

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:
Ini yang saya jalankan lewat web browser:

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:
Ini yang saya jalankan lewat web browser:
Jadi, di sini adalah cara kerjanya:

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:
Ini yang saya jalankan lewat web browser:

 
Post a Comment

Back to Top