CSS border-image-slice Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 16 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-image-slice property in CSS is used to divide an image into regions, which can then be used to create complex borders around elements. This property is part of the larger border-image property set and allows you to control how the image is sliced into sections to form the borders. This can be particularly useful for creating visually interesting borders that go beyond simple solid or dashed lines.

💡 Syntax

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

Syntax

Copied

element {
  border-image-slice: number|percentage|fill;
}

🎛️ Default Value

The default value of the border-image-slice property is 100, which means the entire image is used without any slicing.

🏠 Property Values

Value	Description
number	Specifies the slice values in pixels. For example, 30 would slice 30 pixels from each side of the image.
percentage	Specifies the slice values as a percentage of the image size. For example, 30% would slice 30% from each side of the image.
fill	This keyword, when added, preserves the middle part of the sliced image, which can be used as a background for the element.

📄 Example

In this example, we'll use the border-image-slice property to create a border from an image and slice it into 4 equal parts.

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-slice Example</title>
  <style>
    .box {
      width: 300px;
      height: 200px;
      border: 10px solid transparent;
      border-image-source: url('border-image.png');
      border-image-slice: 25%;
    }
  </style>
</head>
<body>
  <h1>Border Image Slice Example</h1>
  <div class="box">
    Content inside the box
  </div>
</body>
</html>

In this example:

The image border-image.png is sliced into four parts, each representing 25% of the image.
These slices are then applied to the four edges of the element's border.

🖥️ Browser Compatibility

The border-image-slice property is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is recommended to test the property in different browsers to ensure consistent behavior across all platforms.

🎉 Conclusion

The border-image-slice property provides a powerful way to create custom borders using images. By slicing an image into sections, you can create unique and visually appealing borders that enhance the design of your website. Whether you're looking to add a subtle touch or create a bold statement, this property gives you the flexibility to achieve your design goals.