CSS Border Properti
CSS Border element memungkinkan Anda untuk menentukan gaya, ukuran, dan warna perbatasan.
Gaya Border
Properti border-style menentukan apa perbatasan untuk ditampilkan.
Catatan: Tidak ada sifat perbatasan akan memiliki efek APAPUN kecuali properti border-style diatur!
nilai border-style:
none: Mendefinisikan tidak ada perbatasan
dotted: Mendefinisikan perbatasan bertitik
dashed: Mendefinisikan perbatasan putus-putus
solid: Mendefinisikan sebuah perbatasan yang solid
double: Mendefinisikan dua perbatasan. Lebar kedua perbatasan adalah sama dengan nilai border-width
groove: Mendefinisikan sebuah perbatasan beralur 3D. Efeknya tergantung pada nilai border-color
ridge: Mendefinisikan sebuah perbatasan bergerigi 3D. Efeknya tergantung pada nilai border-color
inset: Mendefinisikan sebuah perbatasan 3D inset. Efeknya tergantung pada nilai border-color
outset: Mendefinisikan awal perbatasan 3D. Efeknya tergantung pada nilai border-color
Border Width
Properti border-width digunakan untuk mengatur lebar perbatasan.
Lebar diatur dalam pixel, atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan: tipis, sedang, atau tebal.
Catatan: "border-width" properti tidak bekerja jika digunakan sendiri. Gunakan "border-style" properti untuk mengatur perbatasan pertama.
p {
border-style: ridge;
border-width: 15px;
}
Warna Border
Properti border-color digunakan untuk mengatur warna perbatasan. Warna dapat diatur oleh:
- Nama - menentukan nama warna, seperti "merah"
- RGB - menentukan nilai RGB, seperti "rgb (255,0,0)"
- Hex - menentukan nilai hex, seperti "# ff0000"
Anda juga dapat mengatur warna perbatasan untuk "transparan".
Jika warna perbatasan tidak maka akan sudah dari properti warna elemen.
Catatan: "border-color" properti tidak bekerja jika digunakan sendiri. Gunakan "border-style" properti untuk mengatur perbatasan pertama.
p {
border-style: ridge;
border-color: green;
}
Perbatasan - sisi Individu
Dalam CSS untuk menentukan batas-batas yang berbeda untuk sisi yang berbeda:
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Contoh di atas juga dapat diatur dengan properti tunggal:
p {
border-style: dotted solid;
}
Border - properti
Seperti yang dapat Anda lihat dari contoh di atas, ada banyak sifat yang harus dipertimbangkan ketika berhadapan dengan border.
Untuk mempersingkat kode, juga mungkin untuk menentukan semua properti perbatasan individu dalam satu properti.Ini disebut properti steno.
Properti border adalah singkatan untuk properti perbatasan individu berikut:
- border-width
- border-style (wajib)
- border-color
p {
border: 5px solid red;
}
0 komentar:
Posting Komentar