Introduction

The CSS property border-image allows using images for borders in order to create visually rich, creative, and complex borders frames. It will be more useful in cases where standard borders cannot provide the needed design aesthetic. You can define with one image how it will be set for the border, slice it, and control how it's displayed.

.box {
  border-image-source: url(diamong.png);
  border-image-slice: 30;
  border-image-width: 20px;
  border-image-outset: 0;
  border-image-repeat: round;
}

Syntax Overview

• border-image-source defines what image or gradient will be used for the border.
• border-image-slice defines how the image will be divided in sections within the border, top, right, bottom, and left.
• border-image-width defines the thickness of the border image on each of its sides.
• border-image-outset allows for extending the border image beyond the border box of an element.
• border-image-repeat specifies how the image should repeat on the edges of the element.

Using border-image-source

The border-image-source property is used to specify an image for use with the border of an element. Its value is a URL that points to an image, or a gradient, and replaces the default styling of solid or dashed borders. The image then is taken by border-image-source and positioned along the edges of an element's border box.

As part of defining border-image-source the image or gradient that gets selected will go to the edges of a box of an element. Properties of slicing, width, and repeat will enable further possibilities how the image is used based on your needs in creation of an aesthetically good frames.

.box {
  border-image-source: url(diamong.png);
}

Challenge 1

Now it is your turn to work with the border-image-source property.

• To use an image as the border of a container, apply the border-image-source property to the .box element and set its value to diamonds.png. This will make diamonds.png the border image for the container.

Using border-image-slice

The border-image-slice controls how the source image is sliced into regions to create the borders. Slicing divides the image into 9 parts: the four corners, four edges and the center allowing the edges to scale properly without distorting the corners.

With some adjustments of the border-image-slice values, you can include more or less of the image on the border of the element, which may be useful in providing more options to you over the look of the final result.

Repeating Border Image

Repeating a border image allows tiling of the image on the edges of an element. This is really helpful when you want to make a pattern that repeats seamlessly-without stretching or distorting the image.

Similar Value

In this case, one value will give a uniform application on all four sides of the border for the element. In other words, the top, right, bottom, and left will all have the same value for their slice portion to make it consistent in creating a border effect without having to specify individual values for each side. This simplifies the syntax when you want a uniform border image slice around the element.

.box {
  border-image-slice: 30;
}

Challenge 2

Now let's practice working with the border-image-slice property.

• To define the amount of the image that will be used for the border, apply the border-image-slice property to the .box element and set its value to 47.

Using border-image-width

The border-image-width property is used to specify the width of an image border. The value of this property can be set in pixels, percentages, or relative to the width of the original border, thus enabling us to change its appearance.

.box {
  border-image-width: 20px;
}

Challenge 3

• To control the thickness of the image-based border, apply the property border-image-width in the .box element and set it to 20px.

Using border-image-outset

The border-image-outset property allows stretching of the border image beyond the original border box of an element. A higher value for the outset pushes the border image out and extends, making it more visible and the focus on the UI frame.

.box {
  border-image-outset: 0;
}

Challenge 4

• To stretch the border image beyond the edge of the element, apply the property border-image-outset in the .box element and set it to 10px.

Using border-image-repeat

The border-image-repeat defines how the image fills along the border of an element. You choose to stretch the image, repeat the image, or do a round of it so that the image fits well along the edges.

.box {
  border-image-repeat: stretch;
}

Challenge 5

• To specify how the border image should fill the border area, apply the property border-image-repeat in the .box element and set it to round.

Gradient Borders

You also can apply a gradient to the property of border-image-source and get a gradient image as a border. Gradients are a way to transition between colors to make more complicated multi-colored borders.

.box {
  border-image: linear-gradient(90deg, greenyellow, orangered);
}

Challenge 6

• Create a gradient border on the box element by adding a linear gradient that runs from yellow to magenta as a border on the .box element using the border-image property with a slice value of 1.

Rounded borders

Browser Compatibility