Tutorial CSS Border (Perbatasan) Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari sifat perbatasan CSS,Gaya perbatasan,nilai border-style:,perbatasan Lebar,contoh,Warna perbatasan,contoh,Border - pengaturan terpisah untuk setiap sisi,contoh,contoh,Border - properti singkat,contoh,contoh yang lebih,sifat perbatasan CSS,
sifat perbatasan CSS memungkinkan Anda untuk menentukan gaya perbatasan elemen dan warna.
properti gaya perbatasan menentukan apa jenis perbatasan yang akan ditampilkan.
Propertiborder-style digunakan untuk menentukan gaya perbatasan
none: Tidak ada border default
burik: burik: Mendefinisikan tenda
berlari: Mendefinisikan kotak putus-putus
padat: definisi perbatasan padat
ganda: mendefinisikan dua batas. Nilai yang sama dari lebar dua perbatasan dan batas-lebar
groove: alur didefinisikan perbatasan 3D. Efeknya tergantung pada nilai-nilai warna batas
ridge: definisi 3D perbatasan punggungan. Efeknya tergantung pada nilai-nilai warna batas
inset: Mendefinisikan sebuah perbatasan 3D tertanam. Efeknya tergantung pada nilai-nilai warna batas
awal: Mendefinisikan sebuah perbatasan awal 3D. Efeknya tergantung pada nilai-nilai warna batas
Coba: mengatur gaya perbatasan
Anda dapat menentukan lebar perbatasan dengan atribut border-width.
Menentukan lebar untuk perbatasan dalam dua cara: Anda dapat menentukan panjang nilai, seperti 2px atau 0.1em; atau menggunakan salah satu dari tiga kata kunci, yaitu tipis, sedang (default) dan tebal.
Catatan: CSS tidak mendefinisikan tiga kata kunci lebar tertentu, sehingga agen pengguna mungkin tipis, sedang dan tebal masing-masing diatur sama dengan 5px, 3px, dan 2px, sementara agen pengguna lain, masing-masing, diatur untuk 3px, 2px dan 1px.
Properti border-color menetapkan warna perbatasan. Anda dapat mengatur warna:
Anda juga dapat mengatur warna perbatasan untuk "transparan".
Catatan: border-color saja tidak bekerja, Anda harus harus menggunakan border-style untuk mengatur gaya perbatasan.
Dalam CSS, Anda dapat menentukan sisi yang berbeda perbatasan yang berbeda:
Contoh di atas juga dapat mengatur atribut tunggal:
Properti border-style dapat memiliki satu sampai empat nilai:
Contoh di atas menggunakan border-style. Namun, juga bisa border-width, border-color bersama-sama.
Contoh di atas menggunakan banyak properti untuk mengatur perbatasan.
T Anda juga dapat mengatur perbatasan di properti.
Anda dapat "perbatasan" atribut set:
Semua properti perbatasan dalam satu deklarasi yang
Contoh ini menunjukkan properti steno untuk mengatur semua empat properti perbatasan dalam laporan yang sama.
Pengaturan gaya perbatasan
Contoh ini menunjukkan bagaimana untuk mengatur gaya perbatasan bawah.
Mengatur lebar perbatasan kiri
Contoh ini menunjukkan bagaimana untuk mengatur lebar perbatasan kiri.
Mengatur warna dari empat perbatasan
Contoh ini menunjukkan bagaimana untuk mengatur warna dari empat perbatasan. Anda dapat menetapkan satu empat warna.
Mengatur warna dari batas kanan
Contoh ini menunjukkan bagaimana untuk mengatur warna dari batas kanan.
milik | deskripsi |
---|---|
batas | properti singkat digunakan untuk mengatur properti dari empat sisi dalam sebuah pernyataan. |
border-style | Hal ini digunakan untuk mengatur gaya perbatasan semua elemen, atau secara terpisah mengatur gaya perbatasan untuk setiap sisi. |
border-width | Semua perbatasan properti singkat menetapkan lebar untuk elemen, atau ditetapkan secara individual lebar untuk setiap sisi perbatasan. |
border-color | Singkatan properti, unsur semua bagian warna perbatasan terlihat, atau mengatur warna, masing-masing empat sisi. |
border-bottom | properti singkat digunakan untuk mengatur semua atribut perbatasan untuk sebuah pernyataan. |
border-bottom-warna | Mengatur warna batas bawah dari elemen. |
border-bottom-style | Mengatur elemen gaya perbatasan. |
border-bottom-width | Mengatur lebar dari batas bawah dari elemen. |
perbatasan-kiri | properti singkat digunakan untuk mengatur semua properti perbatasan kiri pernyataan. |
perbatasan-kiri-warna | Mengatur warna dari elemen batas kiri. |
perbatasan-kiri-gaya | Unsur gaya batas kiri. |
perbatasan-kiri-lebar | Unsur lebar perbatasan kiri. |
batas kanan | properti singkat untuk setting semua properti di sebelah kanan kotak untuk sebuah pernyataan. |
batas kanan-warna | Mengatur warna dari elemen batas kanan. |
batas kanan-style | Unsur gaya batas kanan. |
batas kanan-lebar | Mengatur lebar dari elemen batas kanan. |
border-top | properti singkat untuk setting semua properti di perbatasan pernyataan. |
border-top-warna | Elemen diatur pada warna perbatasan. |
border-top-style | Elemen diatur pada gaya perbatasan. |
border-top-width | Elemen diatur pada lebar perbatasan. |