EDUCBA

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

Border Images in CSS

By Mahantesh NagathanMahantesh Nagathan

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.

There are three parts to the property:

  • The border is created with an image
  • Where to split an image
  • Describes whether centre parts should be extended or repeated

This makes the image appear more prominent and vary from the other page items. We will be demonstrating how to add a border to an image in the upcoming examples.

CSS Border Images Properties

Following are the CSS border-image properties.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

  • 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.

The syntax for CSS border-image can be written below properties:

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

Below are the examples mentioned:

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 the place of border styles. However, the support for border-image has improved and it is supporting all the modern browser versions. This border-image property provides custom borders to images on their websites which makes them look better. The border-image property is very useful which can add a unique dimension to your layout.

Recommended Articles

This is a guide to Border Images in CSS. Here we discuss an introduction to Border Images , properties with examples for better understanding. You can also go through our other related articles to learn more –

  1. CSS Clearfix
  2. CSS Color Chart
  3. CSS Animation Transition
  4. CSS Transition Effects
0 Shares
Share
Tweet
Share
quiz