Border Properti

CSS Border Properti

Sifat perbatasan CSS memungkinkan Anda untuk menentukan gaya, ukuran, dan warna perbatasan sebuah elemen.
Gaya perbatasan

Properti border-style menentukan apa perbatasan untuk ditampilkan.
Catatan Catatan: Tidak ada sifat perbatasan akan memiliki efek APAPUN kecuali properti border-style diatur!
nilai border-style:

none: Mendefinisikan ada batas

dotted: Mendefinisikan perbatasan bertitik

berlari: Mendefinisikan perbatasan putus-putus

padat: Mendefinisikan perbatasan yang solid

ganda: Mendefinisikan dua perbatasan. Lebar dua perbatasan adalah sama dengan nilai border-width

groove: Mendefinisikan perbatasan beralur 3D. Efeknya tergantung pada nilai border-color

ridge: Mendefinisikan sebuah perbatasan bergerigi 3D. Efeknya tergantung pada nilai border-color

inset: Mendefinisikan perbatasan 3D inset. Efeknya tergantung pada nilai border-color

awal: Mendefinisikan awal perbatasan 3D. Efeknya tergantung pada nilai border-color

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 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.
contoh
p.one {
     border-style: padat;
     border-width: 5px;
}

p.two {
     border-style: padat;
     border-width: menengah;
}

Cobalah sendiri »

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 diatur itu diwariskan dari properti warna elemen.

Catatan: "border-color" properti tidak bekerja jika digunakan sendiri. Gunakan "border-style" properti untuk mengatur perbatasan pertama.
contoh
p.one {
     border-style: padat;
     border-color: red;
}

p.two {
     border-style: padat;
     border-color: # 98bf21;
}

Cobalah sendiri »

Perbatasan - sisi Individu

Dalam CSS adalah mungkin untuk menentukan batas yang berbeda untuk sisi yang berbeda:
contoh
p {
     border-top-style: dihiasi;
     border-kanan-style: padat;
     border-bottom-style: dihiasi;
     border-kiri-style: padat;
}

Cobalah sendiri »

Contoh di atas juga dapat diatur dengan properti tunggal:
contoh
p {
     border-style: burik padat;
}

Cobalah sendiri »

Properti border-style dapat memiliki dari satu sampai empat nilai.

     border-style: burik ganda padat berlari;
         perbatasan atas dihiasi
         batas kanan solid
         batas bawah ganda
         perbatasan kiri berlari

     border-style: burik padat ganda;
         perbatasan atas dihiasi
         batas kanan dan kiri yang padat
         batas bawah ganda

     border-style: burik padat;
         perbatasan atas dan bawah yang dihiasi
         batas kanan dan kiri yang padat

     border-style: dihiasi;
         keempat perbatasan yang bertitik

Properti border-style digunakan dalam contoh di atas. Namun, ia juga bekerja dengan perbatasan-lebar dan border-color.
Perbatasan - Properti Singkatan

Seperti yang dapat Anda lihat dari contoh di atas, ada banyak sifat yang perlu dipertimbangkan ketika berhadapan dengan perbatasan.

Untuk mempersingkat kode, juga memungkinkan 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

contoh
p {
     border: 5px merah solid;