Web Tutorials

</>   CSS Tutorial

CSS

Cascading Style Sheet

Border-Image

The border-image property is used to add image boarder to some elements.

Example
<html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text1
{
border: 10px solid transparent;
border-image: url("img/Skillpundit-border.png") 30 round;
padding: 15px;
 }
 </style> </head>
<body>
<h3 class="text1">www.skillpundit.com</h3>
 </body> </html>
Output

Click for Download Image Images Zip

www.skillpundit.com
The border-image-slice Property
<html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text1
{
border: 10px solid transparent;
border-image: url("img/Skillpundit-border.png") round;
border-image-slice: 20%;
padding: 15px;
 }
 </style> </head>
<body>
<h3 class="text1">www.skillpundit.com</h3>
 </body> </html>
Output

Click for Download Image Images Zip

www.skillpundit.com
The border-image-source Property
<html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text1
{
border: 10px solid transparent;
border-image: url("img/Skillpundit-border.png");
border-image-repeat: stretch;
border-image-slice: 30;
padding: 15px;
 }
 </style> </head>
<body>
<h3 class="text1">www.skillpundit.com</h3>
 </body> </html>
Output

Click for Download Image Images Zip

www.skillpundit.com