Border transparan keren dengan css

Border transparan dengan css ini terbentuk saat saya lagi iseng - iseng gak ada kerjaan jadi mending coba - coba aja nge-buat border transparan dan ternyata bisa, bersyukur banget bisa jadi bisa buat update postingan hari ini. border ini beda Loh, kalau border biasa kan berada di luar gambar nah kalau border ini berada di dalam gambar tapi dengan ukuran yang sesuai agar gambar juga terlihat cantik / ganteng hehhehee jika penasaran langsung saja lihat demo nya

DEMO

Perhatikan gambar yang berada di kiri dan kanan itu memakai border transparan yang ada di dalam gambar, sedangkan gambar yang di tengah menggunakan border biasa yang berada di luar gambar, perhatikan baik - baik siapa tau nanti agan2 kira sama, padahal beda. di gambar itu juga sengaja saya beri box shadow yang inset ( masuk ) biar keliatan fresh gambarnya.

Dan ini kodenya.

<div class="system-of-blogYow">
<img src='url gambar.jpg'/>
</div>

<style type="text/css">
.system-of-blogYow {
    width: 250px;
    height: 300px;
    border: 1px solid rgb(30, 144, 255);
    -moz-box-shadow: 0 0 5px 1px rgb(30, 144, 255);
    -webkit-box-shadow: 0 0 5px 1px rgb(30, 144, 255);
    box-shadow: 0 0 5px 1px rgb(30, 144, 255);
    position: relative;
    display: block;
    margin: 0 auto
    }

.system-of-blogYow img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    border: 0;
    margin: 0;
    padding: 0
    }

.system-of-blogYow:before {
    content: "";
    position: absolute;
    border: 15px solid rgba(30, 144, 255, 0.5);
    width: 89%;
    height: 90%;
    -moz-box-shadow: inset 0 0 45px #F0F;
    -webkit-box-shadow: inset 0 0 45px #F0F;
    box-shadow: inset 0 0 45px #F0F
    }
</style>

Jika ingin menambah gambarnya tambah lagi kode yang seperti ini

lt;div class="system-of-blogYow">
<img src='url gambar.jpg'/>
</div>