CSS Properties: Specify the border-image-source property to be used as a border.

Last update on February 19 2024 13:02:29 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to specify the border-image-source property is to be used as a border</title><!-- Title of the HTML document -->
<style>
/* CSS styling */
div {
  border: 15px solid transparent; /* Sets a transparent solid border with 15px width for <div> elements */
  padding: 15px; /* Adds 15px padding to the <div> elements */
  border-image-source: url(https://www.w3resource.com/w3r_images/border1.gif); /* Specifies the border image source */
  border-image-slice: 50; /* Sets the size of the border image slices to 50 pixels */
}
</style>
</head>
<body>
<div>border-image: source;</div><!-- Demonstrates the use of border-image-source property as a border -->
</body>
</html>

Explanation:

This HTML document demonstrates how to use the border-image-source property to specify an image to be used as a border.
The <div> element is styled with a transparent solid border with a width of 15 pixels and 15 pixels of padding.
The border-image-source property specifies the URL of the image to be used as the border.
border-image-slice: 50; sets the size of the border image slices to 50 pixels.
The text "border-image: source;" inside the <div> demonstrates the use of the border-image-source property as a border.

Live Demo:

See the Pen border-image-source-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page