Editing foto dengan menambahkan garis tepi (border) adalah salah satu teknik yang sering digunakan untuk memperindah tampilan gambar. Dalam tutorial ini, kita akan membahas cara mengatur garis tepi pada foto menggunakan CSS.
1. Menggunakan Property border
Property border digunakan untuk menambahkan garis tepi pada elemen HTML. Property ini membutuhkan tiga nilai: tebal border, style border, dan warna border. Penulisan ketiga nilai ini dipisahkan dengan spasi.
Contoh penggunaan:
html
Pada contoh di atas, kita membuat bingkai setebal 2 pixel, berbentuk garis normal, dan berwarna merah.
2. Jenis Style Border
Terdapat beberapa jenis style border yang dapat digunakan:
- Solid: garis utuh
- Dotted: garis putus-putus
- Dashed: garis putus-putus dengan ruang lebih panjang
- Double: dua garis utuh
- Groove: efek tiga dimensi
- Ridge: efek tiga dimensi terbalik
- Inset: efek cekungan
- Outset: efek timbul
Contoh tampilan ke-8 jenis border:
html
Anda dapat mengganti warna dan ukuran border sesuai kebutuhan.
3. Mengatur Border untuk Setiap Sisi
Anda juga dapat mengatur sisi mana saja yang akan diberi bingkai. Gunakan property border-top, border-right, border-bottom, dan border-left.
Contoh:
html
Selamat mencoba mengatur garis tepi pada foto Anda!
