CSS border-image Property


CSS border-image property sets the image as a border of an element. For example,

h1 {
    border-image: url("pattern-image.png") 60;
}

Browser Output

CSS Border Image Example

Here, the border-image property adds the image as the border of the h1 element.


CSS border-image Syntax

The syntax of the border-image property is as follows,

border-image: source slice / width / outset repeat | initial | inherit;

Here,

  • source: specifies the URL for the border image
  • slice: specifies the length value to slice the edges of the image for the border
  • width: specifies the width for the border image
  • outset: specifies how far the border image extends after the border box
  • repeat: specifies how the border space is distributed with repeat, round, and space value
  • initial: sets the property value to none (default value)
  • inherit: inherits the property value from its parent

Example: CSS border-image Property

Let's see an example of the border-image property,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS border-image</title>
    </head>

    <body>
        <h1>Some content....</h1>
    </body>

</html>
h1 {
    /* adds a solid border, necessary for border image */
    border: solid;

    /* image url | slice width | border-width */
    border-image: url("https://img.freepik.com/free-photo/brown-square-texture_1194-7340.jpg?w=826&t=st=1686742674~exp=1686743274~hmac=58c8053259877149e055e29bb68430ee532cf0a897d7b84a50ede0aaa98a5a03")
        50 / 20px;

    /* adds 20px padding */
    padding: 20px;
}

Browser Output

CSS Border Image Example

In the above example,

border-image: border-image.png 20 / 20px repeat;

creates a border with an image where

  • border-image.png: specifies the URL of the border image
  • 50: specifies the width in pixels that is sliced from the edges of the border image
  • 20px: specifies the width of the border image
  • repeat: background image is repeated to fill the border width

Note: The border-image property only works when the border-style property is set to solid.


CSS border-image Property Working

Many people get confused about how the image is sliced for the border. The image portion for the border is sliced with the slice value of the border-image property.

Suppose we have a slice value of 40, then our image will be sliced 40px from each edge of the image.

Let's have a look at the following diagram,

CSS Border Image Working Example

Here, the image is sliced from the edges to the line. The space between the edge and lines is 40px as the specified slice value.

This extracted image will fit into the specified width value of the border-image property.

The extracted border image,

  • Fits exactly if the slice value is equal to the width value.
  • Gets stretched if the width value is larger than the slice value.
  • Gets shrunk if the width value is smaller than the slice value.

CSS border-image With Linear Gradient

The border-image property also accepts any kind of gradients to create the border image. For example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS border-image</title>
    </head>

    <body>
        <p>Some content....</p>
    </body>

</html>
p {
    /* border-width | border-style */
    border: 20px solid;

    /* linear-gradient | border-slice-width */
    border-image: linear-gradient(to right, orange, red) 30;

    padding: 12px;
}

Browser Output

CSS Border Image With Linear Gradient Example

In the above example,

linear-gradient(to right, orange, red) 30;

creates a border with a linear gradient that is sliced at 30px from the edges of the gradient.


CSS border-image as a shorthand property

The border-image shorthand property allows us to specify all of the border image-related properties in a single declaration. For example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS border-image</title>
    </head>

    <body>
        <p>Some content....</p>
    </body>

</html>
p {
    border-style: solid;

    /* border-image-source | slice-width | border-width | outset-width | border-image-repeat */
    border-image: url("https://img.freepik.com/free-photo/brown-square-texture_1194-7340.jpg?w=826&t=st=1686742674~exp=1686743274~hmac=58c8053259877149e055e29bb68430ee532cf0a897d7b84a50ede0aaa98a5a03")
        60 / 20px / 5px repeat;

    padding: 20px;
}

Browser Output

CSS Border Image Shorthand Example

In the above example,

border-image: url("pattern.png") 60 / 20px / 5px  repeat;

is equivalent to,

border-image-source: url("pattern.png");
border-image-slice: 60;
border-image-width: 20px;
border-image-outset: 5px;
border-image-repeat: repeat;

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges