CSS Properties: How to specify an image as the border around an element?
Solution:
HTML Code:
Explanation:
- This HTML document showcases how to use an image as a border around an element using the border-image property.
- Two CSS rulesets are defined for elements with IDs borderimg1 and borderimg2.
- border: 15px solid transparent; sets a transparent solid border with a width of 15 pixels for both elements.
- padding: 10px; adds 10 pixels of padding to both elements.
- -webkit-border-image and -o-border-image are vendor-prefixed properties for WebKit (Chrome, Safari) and Opera browsers respectively. They specify the border image and its properties (url, width, tiling method).
- border-image is the standard property that specifies the border image and its properties for other browsers.
- The <p> elements with IDs borderimg1 and borderimg2 demonstrate different tiling methods ("round" and "stretch") applied to the border image.
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.