CSS Perbatasan Properti
Sifat perbatasan CSS memungkinkan Anda untuk menentukan gaya dan warna perbatasan suatu elemen.
Perbatasan Gaya
Properti border-style menentukan apa perbatasan untuk ditampilkan.
Catatan Tidak ada sifat perbatasan akan memiliki efek APAPUN kecuali properti perbatasan gaya diatur!
Gaya perbatasan nilai-nilai:
- none: Mendefinisikan perbatasan tidak ada
- bertitik: Mendefinisikan sebuah perbatasan bertitik
- putus-putus: Mendefinisikan sebuah perbatasan putus-putus
- padat: Mendefinisikan sebuah perbatasan yang solid
- ganda: Mendefinisikan dua perbatasan. Lebar dari dua perbatasan adalah sama dengan nilai lebar perbatasan
- alur: Mendefinisikan sebuah perbatasan beralur 3D. Efeknya tergantung pada nilai-warna perbatasan
- punggungan: Mendefinisikan sebuah perbatasan bergerigi 3D. Efeknya tergantung pada nilai-warna perbatasan
- inset: Mendefinisikan sebuah perbatasan inset 3D. Efeknya tergantung pada nilai-warna perbatasan
- awal: Mendefinisikan sebuah perbatasan awal 3D. Efeknya tergantung pada nilai-warna perbatasan
Coba sendiri: Mengatur gaya perbatasan
Perbatasan Lebar
Properti border-width digunakan untuk mengatur lebar perbatasan.
Lebar diatur dalam pixel, atau dengan menggunakan salah satu dari tiga pra-ditentukan nilai: tipis, sedang, atau tebal.
Catatan: “border-width” properti tidak bekerja jika digunakan sendiri. Gunakan “border-style” properti untuk mengatur perbatasan pertama.
p.one
{
border-style: solid;
border-width: 5px;
}
p.two
{
border-style: solid;
border-width: menengah;
}
Perbatasan Warna
Properti perbatasan-warna yang digunakan untuk mengatur warna perbatasan. Warna dapat diatur oleh:
- nama – nama warna menentukan, seperti “merah”
- RGB – menentukan nilai RGB, seperti “rgb (255,0,0)”
- Hex – menentukan nilai hex, seperti “# ff0000Anda juga dapat mengatur warna perbatasan untuk “transparan”.
Catatan: “perbatasan-warna” properti tidak bekerja jika digunakan sendiri. Gunakan “border-style” properti untuk mengatur perbatasan pertama.”
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: # 98bf21;
}
Perbatasan – Sisi individu
Dalam CSS adalah mungkin untuk menentukan batas-batas yang berbeda untuk sisi yang berbeda:
contoh
p
{
border-top-style: dotted;
perbatasan-kanan-style: solid;
perbatasan-bottom-style: dotted;
border-left-style: solid;
}