Well idk exactly how to do an image based borders but this method will sure make it look like the borders are image based. just tweak the css/html xD eg.:

i used the image below as the border's image base

so the codes :
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8s_V8A85qlzsm6ds3IBRaEnL0v-6VbDIagtAT9yMj6adqbhqs-jlIgcZOJEYQpgXRYPupSyfs_8FayycHjqMhs8sKf49yCT_yA4deANpHqdjvHbSDHvYmB_-asPBN4RkVu8ASaInbBZ4/s400/18.png" style="border:10px dashed transparent; background-image:url('http://i524.photobucket.com/albums/cc325/amira_images/bg-2.jpg');">

the codes above is only for a selected image. it means if you want to make it the same for all images in your site, edit the css instead and the codes are as below:
img {border:10px solid transparent; background-image:url('http://i524.photobucket.com/albums/cc325/amira_images/bg-2.jpg');}

this is not recommended for beginners

to change the width of the borders just change the 10px in the codes to a larger number.

the solid states the style of the border. but since the color of our border used in the image above is transparent, then it can't be seen.

just change the image url for the background-image with the image url you wanna use as the border's image base. & then you're done.

you can google for more info. Credits to Reviviscent for the icon and 5 points apart for the base image. you can press ctrl+c after selecting the text you wanna copy from the textareas (since i've disabled right click)

Labels: tutorials

Newer posts