Saturday, December 20, 2014

Tutorial CSS Part 10: Membuat dan Mengatur Style Border

Border adalah garis tepi sebuah elemen html seperti box, tabel, image dan sebagainya. Border dalam kehidupan sehari-hari mirip dengan bingkai. Pada CSS disediakan beberapa properti untuk membuat dan mengatur style tampilan border. Properti-properti tersebut meliputi memilih style border, menentukan ukuran lebar border, warna border dan beberapa elemen border.

Berikut ini beberapa properti CSS untuk border dan penjelasannya :

1.border-style

Adalah properti CSS yang digunakan untuk mengatur style sebuah border. Properti ini merupakan properti utama dan merupakan syarat agar properti yang lain dapat bekerja.

Ada beberapa nilai yang bisa diset untuk border-style, yaitu :
Nilai Keterangan
none tanpa garis border
dotted garis border titik-titik ..
dashed garis border strip-strip --
solid garis border penuh
double border dengan dua garis penuh
groove garis border efek alur 3D
ridge garis border dengan efek bukit / bubungan *
inset garis border dengan efek menjorok ke dalam *
outset garis border dengan efek menjorok ke luar *
Note :
* efek groove, risge, inset dan outset bergantung pada penggunaan warna pada properti border-color.

Contoh penggunaan CSS border-style :
div {
    border-style: solid;
}
Kita bisa berlatih CSS border-style disini >>

2. border-width

Adalah properti CSS yang digunakan untuk mengatur lebar border. Nilai properti width dinyatakan dalam px (pixel atau bisa juga dengan tiga preset border thin, medium, dan thick. Seperti yang telah dijelaskan tadi, bahwa untuk menggunakan css border-width harus setelah border-style.

Contoh penggunaan CSS border-width :
div {
    border-style: solid;
    border-width: 1px;
}
Kita bisa berlatih CSS border-width disini >>

3. border-color

Adalah properti CSS yang digunakan untuk mengatur warna border. Seperti border-width, sebelum menggunakan properti border-color harus diset dulu properti style.

Ada tiga cara dalam menentukan nilai warna, yaitu :
  • menggunakan nama warna seperti red, blue, green dan sebagainya
  • menggunakan kode heksa warna seperti #ff0000 untuk warna merah dan #0000ff untuk warna biru, dan seterusnya.
  • menggunakan nilai RGB seperti rgb(255,0,0) untuk warna merah, rgb(0,0,255) untuk warna biru dan seterusnya.
Contoh penggunaan CSS border-color :
div {
    border-style: solid;
    border-color: #98bf21;
}
Kita bisa berlatih CSS border-color disini >>

4. border-style individual

Adalah properti CSS yang digunakan untuk mengatur style tiap-tiap sisi border. Ada dua cara dalam menuliskan CSS border-style individual yaitu dengan cara langsung pada border style atau dengan properti tersendiri.

Cara langsung bisa dikakukan pada properti border-style dengan cara memisahkan masing-masing nilai dengan spasi. Urutan sisi pada penulisan nilai adalah atas, kanan, bawah dan kiri.

Contoh penggunaan CSS border-style individual secara langsung :
div {
    border-style: solid dashed dotted dashed;
}
Kita bisa berlatih CSS border-style individual langsung disini >> 

Cara kedua dilakukan dengan mengeset langsung dengan properti tersendiri.

Ada empat properti border-style individual :
  • border-top-style, untuk mengatur sisi atas
  • border-right-style, untuk mengatur sisi kanan
  • border-bottom-style, untuk mengatur sisi bawah
  • border-left-style, untuk mengatur sisi kiri
Contoh penggunaan CSS border-style individual :
div {
    border-top-style: solid;
    border-right-style: dashed;
    border-bottom-style: dotted;
    border-left-style: dashed;
}
Kita bisa berlatih CSS border-style individual tidak langsung disini >>

5. border 

Adalah properti yang merupakan penggabungan dari masing-masing properti diatas. Ini merupakan cara singkat untuk menulis CSS border.

Contoh penggunaan CSS border :
div {
   border: 1px solid #98bf21;
}
Kita bisa berlatih CSS border disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

0 komentar

Post a Comment