Wednesday, 12 July 2017

Creating The Border Image in CSS

Create a Web Page named borderimage.html which is used to display the implementation of the border-image property.

<!doctype html>

<body>

<p style=" border: 40px solid transparent;
    padding: 15px;
    -webkit-border-image: url(11.png) 30 round;
    -o-border-image: url(11.png) 30 round;
    border-image: url(11.png) 30 round;">
image border image border image border image border image border image border image border image border image border

image border  image border image border image border image border image border image border image border image border

image border  image border image border image border image border image border image border image border image border

image border  image border image border image border image border image border image border image border image border

</p>

<p style="border: 40px solid transparent;
    padding: 15px;
    -webkit-border-image: url(2.png) 30 stretch;
    -o-border-image: url(2.png) 30 stretch;
    border-image: url(2.png) 30 stretch;">
image border  image border image border image border image border image border image border image border image border

image border  image border image border image border image border image border image border image border image border

image border  image border image border image border image border image border image border image border image border

image border  image border image border image border image border image border image border image border image border

image border  image border image border image border image border image border image border image border image border </p>

</body>

</html>
Here P element designed with two different images for their borders.
 

The output of the above documents:

 
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)