CSS Border

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

p.two {
    border-style: solid;
    border-width: medium;
}

Border Color

Properti border-color digunakan untuk mengatur warna perbatasan. Warna dapat diatur oleh:

Name - 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.

p.one {
    border-style: solid;
    border-color: red;
}

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

Border - Individual sides

Dalam CSS adalah mungkin 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 - Shorthand property

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

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