CSS - Border Image

CSS Border Image - Shorthand

CSS provides a shorthand property for setting up border image, i.e., border-image. The values passed to shorthand border-image are separated using the solidus symbol (/). The values should be listed in a specific order, which is slice, then width and last is offset.

Following are other related properties of border-image shorthand, in their order:

  • border-image-source: Specifies the source of border-image. Can be a URL, CSS gradient or inline SVG.

  • border-image-slice: Allows the slicing up of image by the browser.

  • border-image-width: Sets the width of the border image.

  • border-image-outset: Pushes the border image outside, beyond the border box.

  • border-image-repeat: Repeats the image specified along the sides of the border, until the whole length and width is filled.

Applies to

All HTML elements, except internal table elements.

Syntax

border-image: url('URL'), 40% 25% 20% fill / 12px 5px / 5px space;

You can also declare the property border-image with just one value i.e., URL and rest of the values will be default.

Example

Let us see an example:

<html>
<head>
<style>
   .box {
      width: 200px;
      height: 200px;
      border: 20px solid;
      border-image: url(images/border.png) 30 round;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

CSS border-image-source Property

The CSS border-image-source property specifies the source of an image to be passed as a border to an element.

Syntax

border: 10px solid; border-image-source: url('URL');

CSS border-image-slice Property

The image specified using the property border-image-source can be sliced using the property border-image-slice. As the name suggests, this property is used to slice up an image. It divides the image in 9 regions, with 4 corners, 4 edges and a middle region.

The following diagram demonstrates function of border-image-slice property:

border-image-slice structure

The offset for border-image-slice can be provided in terms of percentage or length units but percentages are highly recommended.

Syntax

border: 20px solid;
border-image-source: url('URL');
border-image-slice: 25%;

CSS border-image-width Property

To specify the width of the image to be set as a border, you can use the CSS property border-image-width.

Syntax

border: 20px solid;
border-image-source: url('URL');
border-image-width: 15px;
border-image-slice: 33.33%;

CSS border-image-outset Property

In order to avoid the overlapping of the image borders and the content, you can use the property border-image-outset.

This property pushes the border image outside, beyond the border box.

Syntax

border: 20px solid;
padding: 1em;
border-image-source: url('URL');
border-image-width: 1;
border-image-slice: 10;
border-image-outset: 8px;

CSS border-image-repeat Property

By default the border image gets stretched along the sides, but this can be changed, using the property border-image-repeat.

This property repeats the image specified along the sides of the border, until the whole length and width is not filled.

Syntax

border: 20px solid;
padding: 1em;
border-image-source: url('URL');
border-image-repeat: repeat;

It can also take the value as round, apart from stretch and repeat.

CSS Gradient Border Images

CSS gradients can also be used to set the border of an element. There are three types of gradients supported: linear, radial and conic.

Linear Gradient

A linear gradient is used to set a smooth transition between two or more colors along a straight line and the same can be used as a border around an element.

Example

Here is an example:

<html>
<head>
<style>
   img {
      height: 300px;
      width: 300px;
   }
   img.linear-gradient {
      border-style: solid;
      border-width: 20px;
      border-image: linear-gradient(45deg, rgb(15, 64, 161), rgb(228, 6, 17)) 1;
   }
</style>
</head>
<body>
   <div>
      <img class="linear-gradient" src="images/orange-flower.jpg" alt="linear-gradient"/>
   </div>
</body>
</html>

Radial Gradient

A radial gradient is used to set a progressive transition between two or more colors that radiate from its origin.

Example

Here is an example:

<html>
<head>
<style>
   img {
      height: 300px;
      width: 300px;
   }
   img.radial-gradient {
      border-style: solid;
      border-width: 10px;
      border-image: radial-gradient(rgb(58, 61, 60), rgb(47, 227, 221)) 1;
   }
</style>
</head>
<body>
   <div>
      <img class="radial-gradient" src="images/orange-flower.jpg" alt="radial-gradient"/>
   </div>
</body>
</html>

Conic Gradient

A conic gradient is helpful in creating an image consisting of color transitions rotated around a center point, rather than radiating from the center.

Example

Here is an example:

<html>
<head>
<style>
   img {
      height: 300px;
      width: 300px;
   }
   img.conic-gradient {
      border-style: solid;
      border-width: 15px;
      border-image: conic-gradient(red, yellow, green, aqua, blue, pink, red) 1;
   }
</style>
</head>
<body>
   <div>
      <img class="conic-gradient" src="images/orange-flower.jpg" alt="conic-gradient"/>
   </div>
</body>
</html>
Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements