Border Image
Syntax
border-image:url("path of image file.extension");
Example
border-image:url("D://New/images/diamond.jpg");
Properties Of Border Image
border-image-sourceborder-image-slice
border-image-outset
border-image-repeat
border-image-width
Border Image Source
This property is used to attach a source image file.
Syntax
border-image-source:url("file path.extension");
Example
border-image-source:url("D://New/butterfly.jpg");
Border Image Slice
This property is used to set inward offset of image border.
Syntax
border-image-slice:Value;
Value includes==>number or % or fill or inherit or initial
Example:
border-image-slice:10;
border-image-slice:fill;
border-image-slice:5%;
Border Image Outset
This property is used to extend the outside area beyond border.
Syntax
border-image-outset:value;
Value includes==>>number or % or initial or inherit
Border Image Width
This property is used to set the size of a border image.
Syntax
border-image-width:value;
Value include==>>auto or number or % or inherit or initial
Example
border-image-width:5px;
border-image-width:4%;
border-image-width:auto;
Border Image Repeat
Border image repeat is used to repeat the image pattern.
Syntax
border-image-repeat:value;
Value include==>>repeat or strech or round or space or initial or inherit
Example
border-image-repeat:repeat;
border-image-repeat:round;
border-image-repeat:space;
Write a program that will use all these properties?
<html>
<head>
<style>
div{
width:400px;
height:300px;
border-image-source:url("D://images/goodies.png");
border-image-width:15px;
border-image-slice:10;
border-image-repeat:repeat;
border-image-outset:15px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
