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;
}