EDUCBA

Home Software Development Software Development Tutorials CSS Tutorial Border Images in CSS

Border Images in CSS

Mahantesh Nagathan
Article byMahantesh Nagathan
Priya Pedamkar
Reviewed byRavi Rathore

Updated June 14, 2023

Border Images in CSS

 

 

Introduction to Border Images in CSS

We can set an image with the CSS border-image property and use it as the border around an element. The border-image property would be used to specify an image to be used as an additional background layer for the element instead of the border styles provided by the border-style properties.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

There are three parts to the property:

  • Create a border using an image.
  • Where to split an image
  • Describes whether center parts should be extended or repeated

This makes the image appear more prominent and vary from the other page items. In the upcoming examples, we will demonstrate how to add a border to an image.

CSS Border Images Properties

Following are the CSS border-image properties.

  • border-image-source: This property defines the image path or source for the border-image.
  • border-image-slice: This property is used to slice the source image into regions.
  • border-image-width: This property specifies the width for border-image.
  • border-image-repeat: Stipulates whether you should repeat, round, or stretch the border-image.
  • border-image-outset: This property is used to determine the amount through which the region of the border image extends beyond the box.

Below are the properties for the CSS border image, written in syntax:

border-image: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

Examples to Implement CSS Border Image Properties

Here are the examples:

Example #1

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> CSS Border Image Property </title>
<style>
#border_img {
border: 5px solid transparent;
padding: 10px;
border-image-source: url(https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png);
border-image-slice: 50;
}
</style>
</head>
<body> <br>
<h1> The border-image-source Property </h1>
<p> Original Image: </p>
<img src="https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png" height="150" width="150">
<p> Using border-image-source property: </p>
<p id="border_img"> Welcome to EDUCBA... !!! </p>
</body>
</html>

Output:

Border Images in CSS - 1

Example #2

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> CSS Border Image Property </title>
<style>
#border_img_slice1 {
border: 5px solid transparent;
padding: 20px;
border-image-source: url(https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png);
border-image-slice: 5%;
}
#border_img_slice2 {
border: 5px solid transparent;
padding: 20px;
border-image-source: url(https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png);
border-image-slice: 10%;
}
#border_img_slice3 {
border: 5px solid transparent;
padding: 20px;
border-image-source: url(https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png);
border-image-slice: 15%;
}
</style>
</head>
<body><br>
<h1> The border-image-slice Property </h1>
<p> Original Image: </p>
<img src="https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png" height="150" width="150">
<p>Using border-image-slice property:</p>
<p id="border_img_slice1"> Welcome to EDUCBA... !!! </p>
<p id="border_img_slice2"> Welcome to EDUCBA... !!! </p>
<p id="border_img_slice3"> Welcome to EDUCBA... !!! </p>
</body>
</html>

Output:

Border Images in CSS - 2

Example #3

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> CSS Border Image Property </title>
<style>
#border_img_slice1 {
border: 5px solid transparent;
padding: 20px;
border-image-source: url(https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png);
border-image-slice: 40;
border-image-width: 25px;
}
#border_img_slice2 {
border: 5px solid transparent;
padding: 20px;
border-image-source: url(https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png);
border-image-slice: 40;
border-image-width: 30px;
}
#border_img_slice3 {
border: 5px solid transparent;
padding: 20px;
border-image-source: url(https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png);
border-image-slice: 40;
border-image-width: 35px;
}
</style>
</head>
<body> <br>
<h1> The border-image-width Property </h1>
<p> Original Image: </p>
<img src="https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png" height="150" width="150">
<p>Using border-image-width property:</p>
<p id="border_img_slice1"> Welcome to EDUCBA... !!! </p>
<p id="border_img_slice2"> Welcome to EDUCBA... !!! </p>
<p id="border_img_slice3"> Welcome to EDUCBA... !!! </p>
</body>
</html>

Output:

Border Images in CSS - 3

Example #4

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> CSS Border Image Property </title>
<style>
#border_img_slice1 {
border: 5px solid transparent;
padding: 20px;
border-image-source: url(https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png);
border-image-slice: 40;
border-image-outset: 10px;
}
#border_img_slice2 {
border: 5px solid transparent;
padding: 20px;
border-image-source: url(https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png);
border-image-slice: 40;
border-image-outset: 15px;
}
#border_img_slice3 {
border: 5px solid transparent;
padding: 20px;
border-image-source: url(https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png);
border-image-slice: 40;
border-image-outset: 15px 2px;
}
</style>
</head>
<body> <br>
<h1> The border-image-outset Property </h1>
<p> Original Image: </p>
<img src="https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png" height="150" width="150">
<p>Using border-image-outset property:</p>
<p id="border_img_slice1"> Welcome to EDUCBA... !!! </p> <br>
<p id="border_img_slice2"> Welcome to EDUCBA... !!! </p> <br>
<p id="border_img_slice3"> Welcome to EDUCBA... !!! </p>
</body>
</html>

Output:

outset property

Example #5

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> CSS Border Image Property </title>
<style>
#border_img_slice1 {
border: 5px solid transparent;
padding: 20px;
border-image-source: url(https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png);
border-image-slice: 40;
border-image-repeat: repeat;
}
#border_img_slice2 {
border: 5px solid transparent;
padding: 20px;
border-image-source: url(https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png);
border-image-slice: 40;
border-image-repeat: round;
}
#border_img_slice3 {
border: 5px solid transparent;
padding: 20px;
border-image-source: url(https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png);
border-image-slice: 40;
border-image-repeat: round stretch;
}
</style>
</head>
<body> <br>
<h1> The border-image-repeat Property </h1>
<p> Original Image: </p>
<img src="https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png" height="150" width="150">
<p>Using border-image-repeat property:</p>
<p> This is border image repeat </p>
<p id="border_img_slice1"> Welcome to EDUCBA... !!! </p>
<p> This is border image round </p>
<p id="border_img_slice2"> Welcome to EDUCBA... !!! </p>
<p> This is border image round stretch </p>
<p id="border_img_slice3"> Welcome to EDUCBA... !!! </p>
</body>
</html>

Output:

repeat property

Conclusion

So far, we have seen how border-image property can be used in place of border styles. However, the support for border image has improved, supporting all modern browser versions. This border-image property provides custom borders to images on their websites, making them look better. The border-image property is very useful, adding a unique dimension to your layout.

Recommended Articles

We hope this EDUCBA information on “Border Images in CSS” benefited you. You can view EDUCBA’s recommended articles for more information.

  1. CSS Clearfix
  2. Color Chart in CSS
  3. CSS Animation Transition
  4. CSS Transition Effects
quiz