Border-image-source Property in CSS3

How to specify the path to the image to be used as a border around an element in CSS3?

By using border-image-source property we can specify the path to the image to be used as a broder around an element.

<style>
        .class1 {
            border-image-source: url(rpg-map-brick-border-clip-art.jpg);
            padding: 4px 7px 2px 4px;
            border-image-slice: 35;
            border: 5px solid thick;
        }
</style>

<body>
    <p>This is the normal element with out class slector.</p>
    <p class="class1">TechFunda.com [This is the ement with class selector]</p>
    <p>
        <img src="rpg-map-brick-border-clip-art.jpg" width="50" height="75" />
        This is The Original Image    
    </p>
</body>

In the above code snippet we have given border-image-source to the .class selector. So that the .class selector applies the style to the specified <p> element.

OUTPUT

Views: 3194 | Post Order: 56

CSS3 > Borders

Border-image-source Property in CSS3

How to specify the path to the image to be used as a border around an element in CSS3?

Related Posts

Utility Tools