home

Css3 Border Image

In css3, with the border-image property, you can create your own type borders with using an image. We have some css properties in the old version but in that we don’t have the option to create border and image, first you need to create your own stylish image with borders see the below example border image that will help you to create an image for a border.

Css3 Border Image Porperty Example code

In Css3 we have two types of border options one is rounded and another one is a stretch. please go through below simple example code with border-image property.

Rounded border-image demo


Here is the example of rounded border-image demo.

Stretched border-image demo


Here is the example of stretched border-image demo

<div id="round">Here is the example of rounded border-image demo.</div>
<div id="stretch">Here is the example of stretched border-image demo</div> <style> div { border: 10px solid transparent; width: 300px; padding: 10px 20px; } #round { -webkit-border-image: url(/tutorials-images/border-dotted.png) 30 30 round; -o-border-image: url(/tutorials-images/border-dotted.png) 30 30 round; border-image: url(/tutorials-images/border-dotted.png) 30 30 round; } #stretch { -webkit-border-image: url(/tutorials-images/border-dotted.png) 30 30 stretch; -o-border-image: url(/tutorials-images/border-dotted.png) 30 30 stretch; border-image: url(/tutorials-images/border-dotted.png) 30 30 stretch; } </style>

Orginal Image


Css3 Border-Image

Css3 Border Image Porperty Browser Compatibility(Support)

Browser Name Version Supporting tag
IE 11.0  
Mozilla Firefox 15.0- 3.5 -moz-
Google Chrome 16.0- 4.0 -webkit-
Safari(apple) 3.1-5 -webkit-
Opera 11-12.1 -o-