CSS Properties: How to set image is stretched to fill the area?
Solution:
HTML Code:
Explanation:
- This HTML document demonstrates how to set an image to be stretched to fill the area as the border around an element.
- The border property sets a transparent solid border with a width of 15 pixels for <div> elements.
- The padding property sets 15 pixels of padding for <div> elements.
- border-image: url(https://www.w3resource.com/w3r_images/border.png); specifies the border image source. It uses the image specified in the URL.
- border-image-slice: 30; sets the size of the border image slices to 30 pixels.
- border-image-repeat: stretch; specifies that the border image should be stretched to fill the area.
Live Demo:
See the solution in the browser
Supported browser
![]() |
![]() |
![]() |
![]() |
![]() |
Yes | Yes | Yes | Yes | No |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.