CSS3 border-image Property
Edit This Code :
See Result »
<!DOCTYPE html> <html> <head> <style> #borderimg { border: 10px solid transparent; padding: 15px; -webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUs1-KeqRmyqbSh5oj-4rqjBZZv-ibvx0SkPgqnT8e9jnAAbKIHgVkSmkXfXBFjMRXyYvosdO08zawj0tm5_1BnHuTW2_aBV4LI6wkZrXMmP930jE5pj5G3QvsBHwoV22wdGQUdpsZlkFS/s400/border.png) 30 round; /* Safari 3.1-5 */ -o-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUs1-KeqRmyqbSh5oj-4rqjBZZv-ibvx0SkPgqnT8e9jnAAbKIHgVkSmkXfXBFjMRXyYvosdO08zawj0tm5_1BnHuTW2_aBV4LI6wkZrXMmP930jE5pj5G3QvsBHwoV22wdGQUdpsZlkFS/s400/border.png) 30 round; /* Opera 11-12.1 */ border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUs1-KeqRmyqbSh5oj-4rqjBZZv-ibvx0SkPgqnT8e9jnAAbKIHgVkSmkXfXBFjMRXyYvosdO08zawj0tm5_1BnHuTW2_aBV4LI6wkZrXMmP930jE5pj5G3QvsBHwoV22wdGQUdpsZlkFS/s400/border.png) 30 round; } </style> </head> <body> <p>The border-image property specifies an image to be used as the border around an element:</p> <p id="borderimg">Here, the middle sections of the image are repeated to create the border.</p> <p>Here is the original image:</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUs1-KeqRmyqbSh5oj-4rqjBZZv-ibvx0SkPgqnT8e9jnAAbKIHgVkSmkXfXBFjMRXyYvosdO08zawj0tm5_1BnHuTW2_aBV4LI6wkZrXMmP930jE5pj5G3QvsBHwoV22wdGQUdpsZlkFS/s400/border.png"> <p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p> </body> </html>
Result :
Newer Post
Older Post
Home