Belajar CSS Part 9 (Mengatur Border)

ASSALAMU'ALAIKUM Wr. Wb.

Mengatur Border Pada CSS

Border/garis tepi dapat digunakan untuk banyak hal, misalnya sebagai elemen dekoratif atau untuk memberi garis batas pemisah dari dua hal. Border properti mendefinisikan width, color, and style dari batas area pada box/kotak.Pada tutorial kali ini kita akan belajar tentang Border pada CSS.

Untuk contoh penggunaanya silahkan simak penjelasandibawah,

CSS memberi Anda pilihan dalam menggunakan border antara lain :

• border-style
• border-width
• border-color
• border-individual

Mengatur Border Style

Pada CSS terdapat banyak gaya untuk mengatur border, kita dapat membuat gaya garis putus - putus, garis tebal dan masih banyak lainya. Untuk memberikan border sekaligus value style yang kita inginkan kita dapat menggunakan properti CSS border-style . 

Perhatikan contoh dibawah ini!!

Index.html

Style.css

Hasil

Mengatur Ukuran pada Boder CSS

Untuk mengatur ukuran border kita dapat menggunakan properti CSS border-width. Berikut contoh penulisan properti border-width

Index.html

 Style.css

Hasil

Memberi Warna pada Border CSS
Untuk memberikan warna pada border kita dapat menggunakan properti CSS border-color . Berikut adalah contoh penulisan properti border-color

 Index.html

Style.css

Hasil

Cara Cepat Memanipulasi Border Pada CSS
Cara untuk memanipulasi atau mengubah border dengan cepat menggunakan CSS kita bisa langsung menggunakan property css border. dan mengisi langsung value ukuran, jenis garis dan warna. untuk cara cepat memanipulasi border dengan css silahkan perhatikan contoh berikut ini.


Index.html

Style.html

Hasil

Perhatikan pada contoh diatas. Untuk mengubah border dengan cepat dapat langsung menyisipkan jenis ukuran, jenis border dan warna yang diinginkan dalam properti border.

#garis_1{
    border:1px solid blue;

Contoh diatas berarti ukuran border 1px, jenis border solid, dan warnanya adalah blue / biru. Teknik ini dinamakan teknik shorthand. Dan jika kita run dalam web browser berikut hasilnya