CSS border-image-source Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 10 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-image-source property in CSS allows you to use an image or gradient as the border of an element. This property is part of the border-image shorthand but can be specified independently to define the source of the border image.

With border-image-source, you can create visually appealing and unique borders that go beyond the standard solid, dashed, or dotted lines.

💡 Syntax

The syntax for the border-image-source property is as follows:

Syntax

Copied

element {
  border-image-source: url(image.jpg) | gradient | none;
}

Here, you can use an image URL, a gradient, or set the value to none to specify that no image is used.

🎛️ Default Value

The default value of the border-image-source property is none, which means no image is used for the border, and the element falls back to the standard border styles defined by the border-style, border-width, and border-color properties.

🏠 Property Values

Value	Description
url(image.jpg)	The URL of the image to be used as the border. It can be any valid image format like PNG, JPEG, SVG, etc.
gradient	A CSS gradient function (e.g., linear-gradient, radial-gradient) to create a gradient border.
none	Specifies that no image is used, and the element will use the default border style.

📄 Example

In this example, we'll use an image as the border of a <div> element.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS border-image-source Example</title>
  <style>
    div {
      width: 300px;
      height: 200px;
      border-width: 10px;
      border-style: solid;
      border-image-source: url('border-image.png');
      border-image-slice: 30;
    }
  </style>
</head>
<body>
  <h1>Div with Image Border</h1>
  <div></div>
</body>
</html>

In this example, the border-image-source property specifies an image called border-image.png, which is used as the border for the <div> element.

🖥️ Browser Compatibility

The border-image-source property is widely supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is advisable to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The border-image-source property provides a creative way to enhance the visual appeal of your website by using images or gradients as borders. Whether you want to add a decorative frame around an element or create a unique design, this property offers great flexibility. Experiment with different images and gradients to see how this property can bring your web design to the next level.