CSS border-image Property

CSS Border Images

An image can stand in for the ordinary line around an element, and the CSS border-image property is what sets it up.

CSS border-image Property

Instead of a normal border, border-image draws one from a picture you supply.

Think of a tic-tac-toe board laid over that picture: it gets cut into nine sections. Corner pieces land on the element's corners, while the pieces in between are repeated or stretched, whichever you prefer.

As a shorthand, border-image stands for five longhand properties:

border-image-source — the path of the picture
border-image-slice — where the cuts are made
border-image-width — how wide the result is drawn
border-image-outset — the distance it reaches past the border box
border-image-repeat — whether the picture is repeated, rounded or stretched

Note: Without the border property also set on the element, border-image has no effect!

CSS border-image Examples

A single picture, "border.png", supplies the border in each of the examples below.

Border image with round

With round, copies of the middle section are laid side by side until the area is full, and they are rescaled if they would not otherwise fit.

Create a page with a paragraph that has an image border using the CSS border-image property with the image "border.png", a slice value of 30, and the round repeat mode. Set a 10px solid transparent border and 15px padding.

> Output: complete HTML page

Prompt

Create a page with a paragraph that has an image border using the CSS border-image property with the image "border.png", a slice value of 30, and the round repeat mode. Set a 10px solid transparent border and 15px padding.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Border Image Round</title>
<style>
#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}
</style>
</head>
<body>

<h1>CSS border-image Property</h1>

<p id="borderimg">An image as the border!</p>

</body>
</html>

Border image with stretch

With stretch, one copy of the middle section is pulled out to cover the whole area.

Create a page with a paragraph that has an image border using the CSS border-image property with the image "border.png", a slice value of 30, and the stretch repeat mode. Set a 10px solid transparent border and 15px padding.

> Output: complete HTML page

Prompt

Create a page with a paragraph that has an image border using the CSS border-image property with the image "border.png", a slice value of 30, and the stretch repeat mode. Set a 10px solid transparent border and 15px padding.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Border Image Stretch</title>
<style>
#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>

<h1>CSS border-image Property</h1>

<p id="borderimg">An image as the border!</p>

</body>
</html>

CSS border-image - Different Slice Values

The look of a border image shifts dramatically as soon as the slice value changes.

Example

The round repeat mode stays the same across these three elements, while the slice value goes from 50 to 20% to 30%.

Create a page showing three paragraphs each with a CSS border-image using "border.png" and the round repeat mode, but with different slice values: 50, 20%, and 30%. Each should have a 10px solid transparent border and 15px padding.

> Output: complete HTML page

Prompt

Create a page showing three paragraphs each with a CSS border-image using "border.png" and the round repeat mode, but with different slice values: 50, 20%, and 30%. Each should have a 10px solid transparent border and 15px padding.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Border Image - Different Slice Values</title>
<style>
#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}
</style>
</head>
<body>

<h1>CSS border-image - Different Slice Values</h1>

<p id="borderimg1">border-image: url(border.png) 50 round;</p>

<p id="borderimg2">border-image: url(border.png) 20% round;</p>

<p id="borderimg3">border-image: url(border.png) 30% round;</p>

</body>
</html>

CSS Border Image Properties

All the CSS border image properties, for reference:

border-image — shorthand that covers every border-image-* property
border-image-source — path of the image that forms the border
border-image-slice — how the border image gets cut up
border-image-width — widths at which the border image is drawn
border-image-outset — how much the border image area reaches beyond the border box
border-image-repeat — whether to repeat, round or stretch the border image