Belajar CSS Part 4 - Border

Assalamu'alaikum Warohmatullaahi Wabarokaatuh.

Border merupakan garis batas sebuah elemen. Dengan CSS kita bisa mengatur style, width, dan warna dari border tersebut.

A. BORDER STYLE

Border Style digunakan untuk mendefinisikan jenis tampilan dari sebuah border. Value yang digunakan dalam pengaturan border style adalah sebagai berikut :

• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• none
• hidden

Berikut merupakan contoh penggunaannya :

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

Berikut hasilnya :

Coba sendiri di sini


B. BORDER WIDTH

Border Width digunakan untuk mengatur ketebalan dari border. Value dari Border Width bisa didefinisikan dalam nilai spesifik (dalam satuan px, cm, in, dsb.) atau dengan value yang telah didefinisikan yaitu thin (tipis), medium (menengah), atau thick (tebal).

Contoh :

p.satu {

border-style: solid;

border-width: 5px;
}

p.dua {

border-style: solid;

border-width: medium;

}

border-style: solid;
p.tiga {
border-width: 3px 10px 5px 4px;
}

Penjelasan :

• p.satu menandakan paragraf dengan nama class satu didefinisikan dengan ketebalan 5 pixel
• p.dua menandakan paragraf dengan nama class dua didefinisikan dengan ketebalan menengah
• p.tiga menandakan paragraf dengan nama class tiga diberi ketebalan masing-masing border atas 3 pixel, border kanan 10 pixel, border bawah 5 pixel, dan border kiri 4 pixel

 Coba sendiri di sini

C. BORDER COLOR

Border Color digunakan untuk mendefinisikan warna dari border. Pendefinisian value warna dapat dilakukan dengan beberapa cara, yaitu :

• Dengan nama warna. Contoh "red", "green", dsb.
• Dengan nilai hexa. Contoh "#ff0000", "#00ff00", dsb.
• Dengan nilai RGB. Contoh "rgb(255,0,0)", "rgb (0,255,0)", dsb.
• Dengan nilai HSL. Contoh "hsl(100%,0,0)", "hsl(0,100%,0)", dsb.
• Dengan nilai transparent.

Penjelasan tentang penyisipan warna bisa Anda baca di Belajar HTML Part 19 - Penyisipan Warna. 

Seperti halnya border width, kita bisa mengatur warna setiap sisi secara terpisah yaitu secara berurutan border atas, border kanan, border bawah, dan border kiri.

Contoh :

p.satu {

border-style: solid;

border-color: red;

}

p.dua {

border-style: solid;

border-color: red green blue yellow;

}

Penjelasan :

• p.satu menandakan paragraf dengan nama class satu diberi warna merah
• p.tiga menandakan paragraf dengan nama class tiga diberi warna masing-masing border atas merah, border kanan hijau, border bawah biru, dan border kiri kuning

 Coba sendiri di sini

D. PENDEFINISIAN SETIAP SISI SECARA TERPISAH

Kita juga bisa mendefinisikan warna dari setiap sisi atas, kanan, bawah, dan kiri secara terpisah. Berikut contoh penggunaannya :

p.satu {

border-top-style: dotted;

border-right-style: solid;
border-bottom-style: double;
border-left-style: dashed;

}

p.dua {
border-style: dotted solid;
}

Penjelasan :

• p.satu diberi nilai berbeda di tiap sisi yaitu dotted untuk border atas, solid untuk border kanan, double untuk border bawah, dan dashed untuk border kiri.
• p.dua diberi dua nilai berbeda di tiap sisi yaitu dotted untuk border atas dan bawah, dan solid untuk border kanan dan kiri.

Coba sendiri di sini

E. SHORTHAND PROPERTY

Semua kode di atas bisa kita ringkas dengan menggunakan metode shorthand property. Yaitu dengan menggunakan banyak deklarasi ke dalam satu kali deklarasi. Untuk lebih jelasnya, berikut contoh penggunaannya :

p {
border : 5px solid red;
}

Penjelasan :

• Dengan script di atas, kita mendefinisikan seluruh paragraf dalam dokumen yang kita buat akan diberi border setebal 5 pixel, style solid, dan warna merah.
• Dengan menggunakan shorthand property, kita bisa mendefinisikan semuanya dengan lebih ringkas.

 Coba sendiri di sini

Demikian Seri Belajar CSS tentang Border. Semoga bermanfaat. Aamiin.

Terima kasih dan

Wassalamu'alaikum Warohmatullaahi Wabarokaatuh.