CSS Properties: How to specify an image as the border around an element?

Last update on February 17 2024 12:46:52 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to specify an image as the border around an element</title><!-- Title of the HTML document -->
<style type="text/css">/* CSS style start*/
#borderimg1 {
border: 15px solid transparent; /* Sets a transparent solid border with 15px width for the element with id "borderimg1" */
padding: 10px; /* Sets 10px padding for the element */
-webkit-border-image: url("https://www.w3resource.com/w3r_images/border.png") 30 round; /* Applies a border image for WebKit browsers with 30px width and "round" tiling */
-o-border-image:url("https://www.w3resource.com/w3r_images/border1.png") 60 round; /* Applies a border image for Opera browsers with 60px width and "round" tiling */
border-image: url("https://www.w3resource.com/w3r_images/border.png")  60 round; /* Applies a border image for other browsers with 60px width and "round" tiling */
 }
#borderimg2 { 
border: 15px solid transparent; /* Sets a transparent solid border with 15px width for the element with id "borderimg2" */
 padding: 10px; /* Sets 10px padding for the element */
 -webkit-border-image: url("https://www.w3resource.com/w3r_images/border.png")  30 stretch; /* Applies a border image for WebKit browsers with 30px width and "stretch" tiling */
}
</style >
</head>
<body>
<p>The border-image property specifies an image to be used as the border around an element:</p><!-- Paragraph explaining the border-image property -->
<p id="borderimg1">Here, the middle sections of the image are repeated to create the border.</p><!-- Paragraph with id "borderimg1" demonstrating the repeated middle sections for border -->
<p id="borderimg2">Here, the middle sections of the image are stretched to create the border.</p><!-- Paragraph with id "borderimg2" demonstrating the stretched middle sections for border -->
</body>
</html>

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 Pen border-image-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page