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

Go to Exercise page


HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<title>How to specify the border-image-source property is to be used as a border</title><!-- Title of the HTML document -->
/* 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 */
<div>border-image: source;</div><!-- Demonstrates the use of border-image-source property as a border -->


  • 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

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
Yes Yes Yes Yes No

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

Follow us on Facebook and Twitter for latest update.