Border Styles

Pernahkah Anda ingin membingkai sebuah kutipan, memisahkan bagian konten, atau sekadar menambahkan sentuhan visual yang menarik? Anda bisa melakukannya dengan mudah menggunakan border styles.

Border bukan hanya sekadar garis. Ada berbagai macam gaya yang bisa Anda terapkan untuk menciptakan efek yang berbeda. Mari kita lihat demo singkat dari beberapa gaya border yang paling umum dan unik.

---

1. Garis Lurus

.solid

Ini adalah gaya border yang paling umum dan serbaguna. .solid menciptakan garis lurus dan tebal yang sempurna untuk membingkai kotak konten, tombol, atau tabel.

Ini adalah contoh teks dengan border solid yang kuat dan jelas.

---

• List 1
• List 2
• List 3

---

2. Garis Titik-titik

.dotted

Gaya .dotted menciptakan serangkaian titik-titik yang berdekatan. Border ini memberikan kesan lebih ringan dan *playful*, cocok untuk memisahkan bagian atau menyoroti elemen dengan cara yang lembut.

Ini adalah contoh teks dengan border titik-titik yang unik.

---

3. Garis Putus-putus

.dashed

Mirip dengan .dotted, gaya .dashed menggunakan garis putus-putus. Border ini sering digunakan untuk menunjukkan sesuatu yang "sementara" atau "tidak final," seperti area yang bisa di-klik.

Ini adalah contoh teks dengan border putus-putus.

---

4. Garis Ganda

.double

Jika Anda menginginkan border yang lebih menonjol dan elegan, .double adalah pilihan tepat. Gaya ini menciptakan dua garis lurus yang sejajar dan rapat, memberikan kesan formal dan profesional.

Ini adalah contoh teks dengan border ganda yang elegan.

---

5. Efek Kedalaman

.groove

Gaya .groove memberikan ilusi 3D seolah-olah border "masuk" ke dalam halaman. Efek ini tercipta dari kombinasi warna terang dan gelap pada border.

Ini adalah contoh teks dengan border alur (groove) yang memberikan efek kedalaman.

---

6. Efek Timbul

.ridge

Kebalikan dari .groove, gaya .ridge menciptakan ilusi 3D seolah-olah border "muncul" atau "timbul" dari halaman.

Ini adalah contoh teks dengan border timbul (ridge).

---

7. Efek Cekung

.inset

Gaya .inset memberikan ilusi bahwa elemen tersebut masuk ke dalam halaman, seperti tombol yang sedang ditekan. Efek ini mirip dengan .groove tetapi dengan garis yang lebih halus dan menonjolkan bagian dalam elemen.

Ini adalah contoh teks dengan border inset yang memberikan efek cekung.

---

8. Efek Cembung

.outset

Kebalikan dari .inset, gaya .outset menciptakan ilusi bahwa elemen tersebut timbul dari halaman, seperti tombol yang belum ditekan. Efek ini mirip dengan .ridge tetapi dengan garis yang lebih halus dan menonjolkan bagian luar elemen.

Ini adalah contoh teks dengan border outset yang memberikan efek cembung.

---

Dengan berbagai gaya border ini, Anda bisa dengan mudah membuat tata letak konten yang lebih menarik dan terstruktur. Selamat mencoba berkreasi!