Properti Border CSS
Properti border CSS memungkinkan Anda menentukan gaya, lebar, dan warna batas elemen.
Unsur ini memiliki batas alur yang lebar 15px dan hijau.
Gaya Perbatasan/border
Properti bergaya border menentukan jenis border yang akan ditampilkan.
Nilai berikut diperbolehkan:
dotted - Tetapkan batas bertitikdashed - Mendefinisikan sebuah garis putus-putussolid - Mendefinisikan batas padatdouble - Mendefinisikan perbatasan gandagroove - Mendefinisikan sebuah border beralur 3D. Efeknya tergantung pada nilai border-colorridge - Mendefinisikan sebuah perbatasan bergerigi 3D. Efeknya tergantung pada nilai border-colorinset - Mendefinisikan sebuah perbatasan inset 3D. Efeknya tergantung pada nilai border-coloroutset - Mendefinisikan batas outset 3D. Efeknya tergantung pada nilai border-colornone - tidak menentukan batashidden - Mendefinisikan sebuah perbatasan tersembunyiProperti
border-style bisa memiliki satu sampai empat nilai (untuk batas atas, perbatasan kanan, perbatasan bawah, dan perbatasan kiri).Contoh
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;}
Hasil:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Catatan Catatan: Tidak ada satu pun dari properti border CSS LAIN yang dijelaskan di bawah ini akan memiliki efek APAPUN kecuali properti bergaya border sudah diatur!
Lebar Perbatasan
/ border-widthProperti dengan batas lebar menunjukkan lebar dari empat batas.
Lebar dapat ditetapkan sebagai ukuran tertentu (dalam px, pt, cm, em, dll) atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan: tipis, sedang, atau tebal.
Properti seluas lebar bisa memiliki dari satu sampai empat nilai (untuk batas atas, perbatasan kanan, perbatasan bawah, dan perbatasan kiri).
Contoh
p.one {Warna Perbatasan
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
Properti warna border digunakan untuk mengatur warna dari empat batas.
Warnanya bisa diatur oleh:
Nama - tentukan nama warna, seperti "merah"
Hex - tentukan nilai hex, seperti "# ff0000"
RGB - tentukan nilai RGB, seperti "rgb (255,0,0)"
Transparan
Properti dengan warna border bisa memiliki satu sampai empat nilai (untuk batas atas, perbatasan kanan, batas bawah, dan perbatasan kiri).
Jika border-color tidak diset, warnanya mewarisi warna elemen.
Contoh
p.one {Perbatasan - Sisi Individu
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
}
Dari contoh di atas Anda telah melihat bahwa adalah mungkin untuk menentukan batas yang berbeda untuk masing-masing sisi.
Di CSS, ada juga properti untuk menentukan masing-masing batas (atas, kanan, bawah, dan kiri):
Contoh
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Contoh di atas memberikan hasil yang sama seperti ini:
Contoh
p {
border-style: dotted solid;
}
Jadi, begini cara kerjanya:
Jika properti
border-style memiliki empat nilai:border-style: dotted solid double dashed;
Batas atas dihiasi
Perbatasan kanannya padat
Batas bawahnya dua kali lipat
Perbatasan kiri putus
Jika properti
border-style memiliki tiga nilai:border-style: dotted solid double;
Batas atas dihiasi
Perbatasan kanan dan kiri padat
Batas bawahnya dua kali lipat
Jika properti
border-style memiliki dua nilai:border-style: dotted solid;
Batas atas dan bawah bertitik
Perbatasan kanan dan kiri padat
Jika properti
border-style memiliki satu nilai:border-style: dotted;
Keempat perbatasan itu bertitik
Properti bergaya border digunakan pada contoh di atas. Namun, ia juga bekerja dengan border-border dan border-color.
Perbatasan - Properti Shorthand
Seperti yang dapat Anda lihat dari contoh di atas, ada banyak properti yang perlu dipertimbangkan saat berhadapan dengan perbatasan.
Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti border individual dalam satu properti.
Properti perbatasan adalah properti singkatan untuk properti perbatasan individual berikut:
border-widthborder-style(wajib)border-color
Contoh
p {
border: 5px solid red;
}
Semua properti border CSS
border > Mengatur semua properti border dalam satu deklarasi
border-bottom > Mengatur semua properti batas bawah dalam satu deklarasi
border-bottom-color > Mengatur warna batas bawah
border-bottom-style > Mengatur gaya border bawah
border-bottom-width > Mengatur lebar batas bawah
border-color >Mengatur warna dari empat batas
border-left > Mengatur semua properti perbatasan kiri dalam satu deklarasi
border-left-color > Mengatur warna perbatasan kiri
border-left-style > Menetapkan gaya perbatasan kiri
border-left-width >Mengatur lebar perbatasan kiri
border-right > Mengatur semua properti border yang tepat dalam satu deklarasi
border-right-color > Mengatur warna perbatasan kanan
border-right-style > Mengatur gaya border yang tepat
border-right-width > Mengatur lebar dari batas kanan
border-style > Menetapkan gaya dari empat perbatasan
border-top > Mengatur semua properti batas atas dalam satu deklarasi
border-top-color > Mengatur warna border atas
border-top-style > Menetapkan gaya border atas
border-top-width >Mengatur lebar batas atasborder-width > mengatur lebar dari empat border
Out Of Topic Show Konversi KodeHide Konversi Kode