Pada materi belajar CSS sebelumnya yaitu box model css kita sudah membahas tentang border. Kali ini kita akan belajarborder CSS lebih dalam lagi. Pembahasannya kita fokuskan pada border style, border width dan border color.
Border style
Pada property border style, terdiri dari bermacam-macam bentuk border antara lain dotted, dashed, solid, double, groove, ridge, inset dan outset.
Border Width
Properti border width digunakan untuk mengatur lebar / ketebalan batas. Untuk pengaturan ketebalan suatu border bisa menggunakan pixels (px) atau bisa menggunakan salah satu ukuran yang biasa digunakan dalam css yaitu, thin, medium, atau thick (tipis, sedang, atau tebal). Dengan catatan property “border width” tidak bekerja jika digunakan sendiri, Gunakan “border style” terlebih dahulu untuk mengaturnya.
Contoh :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| p.one{border-style:solid;border-width:5px;}p.two{border-style:solid;border-width:medium;} |
Border Color
Border color digunakan untuk mengatur warna border. Untuk pengaturan warna suatu border bisa menggunakan nama suatu warna (dalam bahasa Inggris tentunya) misalnya, blue, red, yellow, grey dll, atau bisa menggunakan RGB misalnya, rgb(0.51.26), atau HEX misalnya, #330000
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| p.one{border-style:solid;border-color:red;}p.two{border-style:solid;border-color:#98bf21;} |
Dengan CSS, kita bisa juga menentukan border yang berbeda untuk sisi yang berbeda dan bagaimana mewarnai border. Menarik bukan? Nah itu akan kita pelajari bareng di materi belajar CSS berikutnya.
0 comments:
Post a Comment