Membuat Garis Border Seperti Tenggelam (Emboss)

Membuat Garis Border Seperti Tenggelam (Emboss) - Berbagai macam garis border bisa kita tampilkan untuk membuat sebuah pembatas ataupun untuk sebagai style dalam suatu elemen baik itu nilai border Solid ataupun Dashed dan lainnya, dengan tambahan properti lain seperti box-shadow bisa menghasilkan garis tersebut mempunyai style seperti terlihat Emboss.

Pada posting sebelumnya sudah pernah saya share mengenai pembuatan garis border seperti emboss, tapi hanya garis border pada bagian bawah saja (border-bottom), namun dalam hal ini saya akan share Garis Border Atas dan Bawah Seperti Emboss.

Tidak jauh berbeda dengan waktu dulu membuat garis border bawah seperti emboss, yaitu dengan bantuan tambahan properti box-shadow untuk menghasilkan garis seperti emboss. Intinya kita mempertemukan dua buah warna untuk saling bertemu (berdepetan) untuk menghasilkan border emboss.

CSS dasarnya seperti ini, kita bisa tambahkan properti lainnya untuk membentuk style isi didalam elemen tersebut.

.selektor {
  border-top: 1px solid  #---;
  border-bottom: 1px solid #---;
  box-shadow: 0 1px 0 #---, 0 -1px 0 #---;
}

Nilai warna pada css diatas tidak ditetapkan, karena tergantung warna background yang dipergunakan untuk menyesuaikan dengan nilai warna border dan nilai warna box-shadow.

dan hasilnya seperti ini:

↑ Contoh Border Emboss ↓

contoh diatas memadukan antara properti border dan properti box-shadow dengan warna yang berbeda dan saling berdempetan sehingga seperti emboss. Hal ini bisa terwujud dengan perpaduan warna yang cocok antara border, box-shadow dan warna background yang dipergunakan untuk menghasilkan emboss yang baik.