CSS Image Stretch
- Demos
- Guides
Source Image
Click or drag an image to this area to preview
Stretched Image
CSS Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Copy following css code to your css file
width: 400px;
height: 200px;
border-image-slice: 200 199 199 200 fill;
border-image-width: 200px 199px 199px 200px;
border-image-repeat: stretch;
border-image-source: ;
// Use following css code if it not work on some browser
border-image: url(YOUR_IMAGE_URL) 200 199 199 200 fill / 200px 199px 199px 200px stretch;
-webkit-border-image: url(YOUR_IMAGE_URL) 200 199 199 200 fill / 200px 199px 199px 200px stretch;
-o-border-image: url(YOUR_IMAGE_URL) 200 199 199 200 fill / 200px 199px 199px 200px stretch;
-ms-border-image: url(YOUR_IMAGE_URL) 200 199 199 200 fill / 200px 199px 199px 200px stretch;
Image Params
Source Image size:
400px * 400px
Image Slice:
200 199 199 200 fill
border-image-width:
border-image-repeat:
stretch