Cara Membuat Border Kotak dengan Efek Sudut Lengkung dan Bayangan

Cara Memberi Border atau Kotak sekaligus Efek Bayangan Border, termasuk trik yang sangat gampang diterapkan. Gampang, karena kita tidak terlalu dipusingkan oleh kode-kode yang semrawut dan rumit. Saya sudah mencoba dan menerapkankannya pada kotak postingan dan widget sebelah kanan. Lihat, lumayan keren khan? Ingat kode CSS ini hanya berlaku untuk browser Mozila/Firefox, Google chrome atau Safari terbaru.

Kalu mau nyoba, berikut langkah-langkahnya.

Pertama silakan masuk ke dashboard , klik RANCANGAN lalu klik EDIT HTML, cari kode kotak postingan atau widget yang anda inginkan. Silakan kopi kode berikut dan pasang setelah kode Padding

-moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px;-moz-box-shadow: 0 0 40px #6a6a6a; -webkit-box-shadow: 0 0 40px #6a6a6a;}

Berikut contoh penempatannya:

Kode yang seperti ini 6a6a6a adalah kode warna garis sekaligus warna bayangannya. Silakan lihat kode warna di sebelah sini , angka 5px adalah besaran sudut, Anda bisa menggantinya sesuai selera. Sementara angka 40px adalah besaran bayangan.

Setelah ditempelkan silakan lihat “Pratinjau” dulu untuk memastikan apakah pekerjaan kita berhasil atau tidak. Biasanya sih langsung tok-cer. Kemudian bila sudah, silakan klik “Simpan” atau “Save”
Lihat hasilnya.

Selamat malam, saya mau tidur dulu. Ngantuk banget!

Rate this article