CSS border-image-outset Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 13 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-image-outset property in CSS is used to specify the amount by which the border image area extends beyond the border box of an element.

This property is useful when you want the border image to protrude outside the box, creating a more pronounced visual effect.

💡 Syntax

The syntax for the border-image-outset property allows you to specify one to four values, which control the outset for each side of the element's border.

Syntax

Copied

element {
  border-image-outset: value;
}

🎛️ Default Value

The default value of the border-image-outset property is 0, meaning the border image does not extend beyond the border box unless specified otherwise.

🏠 Property Values

Value	Description
length	A fixed measurement such as 10px, 2em, etc., that defines the outset.
number	A number representing a multiplier of the border width.
percent	A percentage value that defines the outset relative to the size of the element (though percentage values are less common with this property).
multiple values	You can specify up to four values, each corresponding to the top, right, bottom, and left sides, in that order.

📄 Example

In this example, we'll extend the border image by 10 pixels on all sides of a box.

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-outset Example</title>
  <style>
    .border-box {
      width: 300px;
      height: 200px;
      border: 10px solid transparent;
      border-image: url('border-image.png') 30;
      border-image-outset: 10px;
    }
  </style>
</head>
<body>
  <h1>Box with Extended Border Image</h1>
  <div class="border-box"></div>
</body>
</html>

In this example, the border image extends 10 pixels beyond the border box on all sides, creating a more prominent border effect.

🖥️ Browser Compatibility

The border-image-outset property is supported in all modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, as with any CSS property, it's advisable to test your design across different browsers to ensure consistent appearance.

🎉 Conclusion

The border-image-outset property is a useful tool for creating unique and visually appealing border effects by extending the border image beyond the element's border box. By experimenting with different values, you can achieve various design effects that enhance the overall look of your website.