Dunia Belajar: CSS Part 6 : Border Pada CSS

Assalamu'alaikum Wr Wb.
Dalam pertemuan kali ini, saya akan memaparkan mengenai Border Pada CSS

Properti Perbatasan Pada CSS
CSS border properti memungkinkan Anda untuk menentukan gaya, lebar, dan warna perbatasan elemen ini.

Gaya Perbatasan
Tag border-style properti memungkinkan jenis perbatasan apa yang akan ditampilkan.
Nilai-nilai berikut yang diizinkan:
dotted - Mendefinisikan perbatasan bertitik
dashed - Mendefinisikan perbatasan putus-putus
solid - Mendefinisikan sebuah perbatasan yang solid
double - Mendefinisikan perbatasan ganda
groove - Mendefinisikan sebuah perbatasan berlekuk 3D. Efeknya tergantung pada nilai border-color.
ridge -Mendefinisikan sebuah perbatasan bergerigi 3D. Efeknya tergantung pada nilai border-color.
inset - Mendefinisikan sebuah perbatasan inset 3D. Efeknya tergantung pada nilai border-color.
outset - Mendefinisikan sebuah perbatasan awal 3D. Efeknya tergantung pada nilai border-color.
None - Mendefinisikan ada batas.
hidden - Mendefinisikan perbatasan tersembunyi.

Tag border-style properti dapat memiliki dari satu sampai empat nilai (untuk perbatasan atas, batas kanan, dan batas kiri).
Contoh

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Hasil

Perbatasan Lebar
Tag border-width properti menentukan lebar empat perbatasan.
Lebar dapat diatur sebagai ukuran tertentu (dalam px, pt, cm, em, dll) atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan : tipis, sedang, atau tebal.
Tag border-width properti dapat memiliki dari satu sampai empat nilai (untuk perbatasan atas, batas kanan, batas bawah, dan perbatasan kiri).
Contoh

p.one {
    border-style: solid;
    border-width: 5px;
}

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

p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

Warna Perbatasan
Tag border-color properti digunakan untuk mengatu warna dari empat perbatasan.
Warna dapat diatur oleh:
nama - menentukan nama warna, seperti "merah"
Hex - menentukan nilai hex, seperti "#ff0000"
RGB - menentukan nilai RGB, seperti "rgb(255,0,0)"
jelas

Tag border-color properti dapat memiliki dari satu sampai empat nilai( untuk perbatasan atas, batas kanan, batas bawah, dan batas kiri).
Jika border-color tidak diatur, itu mewarisi warna dari elemen.
Contoh

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

p.two {
    border-style: solid;
    border-color: green;
}

p.three {
    border-style: solid;
    border-color: red green blue yellow;
}

Border -Individual Sides
Dari contoh di atas Anda telah melihat bahwa adalah munkin untuk menentukan perbatasan yang berbeda untuk setiap sisi.
Dalam CSS, ada juga properti untuk menentukan masing-masing perbatasan (atas, kanan, bawah, dan kiri).
Contoh

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

Jadi, di sini adalah cara kerjanya:
Jika border-style properti memiliki empat nilai:

    border-style: dotted ganda padat putus-putus;
        batas atas dihiasi
        batas kanan solid
        batas bawah adalah ganda
        perbatasan kiri putus-putus

Jika border-styleproperti memiliki tiga nilai:

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

Jika border-styleproperti memiliki dua nilai:

    border-style: dotted padat;
        batas atas dan bawah yang putus-putus
        perbatasan kanan dan kiri yang padat

Jika border-styleproperti memiliki satu nilai:

    border-style: dotted;
        keempat perbatasan yang putus-putus

The border-styleproperti yang digunakan dalam contoh di atas. Namun, ia juga bekerja dengan border-width dan border-color.
Border - Properti Steno

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.

The borderproperti adalah properti singkatan untuk properti border individu berikut:

    border-width
    border-style (wajib)
    border-color
Contoh