Membuat Bingkai atau Border Menggunakan CSS
/
0 Comments
Ngaeweb - Hari ini saya akan memberi tahu kalian mengenai
cara membuat Bingkai menggunakan CSS.
Untuk membuat bingkai, kita bisa memakai properti seperti di
bawah ini.
- border, digunakan untuk membuat keseluruhan dari bingkai.
- border-left, digunakan untuk membuat bingkai bagian kiri.
- border-right, digunakan untuk membuat bingkai bagian kanan.
- border-top, digunakan untuk membuat bingkai bagian atas.
- border-bottom, digunakan untuk membuat bingkai bagian bawah.
 |
| Gambar 1.1 Ilustrasi Properti Bingkai Suatu Elemen |
Properti tersebut bisa di isi dengan beberapa nilai.
Contoh
border:
4px solid #000;
Pada contoh tersebut,
- 4px menyatakan ukuran ketebalan bingkai.
- solid menyatakan bentuk bingkai.
- #000 menyatakan warna bingkai.
 |
| Gambar 1.2 contoh membuat bingkai |
Menentukan Bentuk
Bingkai
Ada
beberapa jenis yang konstanta yang di pakai untuk menentukan bentuk bingkai
seperti,
 |
| Gambar 1.3 Konstanta Penentu Bentuk Binkai |
Mengatur Ketebalan Bingkai
Ketebalan bingkai juga bisa diatur
melalui width entah itu border-width,
border-left-width ataupun border-right-width. Nilai top, bottom, left
,dan right berfungsi untuk mengatur bagian bingkai sesuai dengan gambar “Ilustrasi Properti Binkai Suatu Element” nilai yang bisa di berikan berupa nilai: 2px
atau menggunakam konstanta,
- thin berarti tipis
- medium berarti sedang
- thick berarti tebal
 |
| Gambar 1.4 Mengatur Ketebalan Menggunakan Konstanta |
Mengatur Warna
Bingkai
selain menggunakan “color” kalian
juga bisa mengubah warna bingkai melalui: border-color,
border-right-color, border-left-color,
border-top-color, dan border-bottom-color
seperti ini,
 |
| Gambar 1.5 hasil koding pengaturan warna |
Sekian informasi dari saya, Semoga berguna untuk anda.
Terimakasi telah berkunjung dan salam NgaeWeb :D.