in

CSS BORDER IMAGES | Add images to Element Borders Using CSS

In this tutorial you will be learning about CSS BORDER IMAGES and how to add images to the border of web pages. In our previous tutorial we looked at CSS ROUNDED CORNER and how to easily use border radius to make beautiful round corners of elements. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS ROUNDED CORNER | Add Round Corners to Elements Using CSS

CSS BORDER IMAGES

CSS doesn’t limit developers to the use of colors when beautifying the borders of web pages. It also allows the use of images with the help of the border image property. This simply means that we can add images to the borders of web pages with the use of simple border image properties which are listed below

  • border-image-source : use to set the image source
  • border-image- slice: use to set the border image slicing
  • border-image-repeat: use to control the border image repetition
  • border-image-width: use to specify the border image width

Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .border_radius{
         border: 15px solid transparent;
         border-image-repeat: round;
         border-image-slice: 40;
         border-image-width: 10px;

         border-image-source: url(html-attributes.png);
      }
   </style>
   
   <title>ILLUSTRATION OF THE BORDER IMAGE PROPERTY</title>
</head>
<body>

   <div class="border_radius">
      THIS IS THE BORDER IMAGE SHOW
   </div>
   
</body>
</html>

RESULT

ILLUSTRATION OF THE BORDER IMAGE PROPERTY
THIS IS THE BORDER IMAGE SHOW

Adding border images to web page background

We are not only limited to adding border images to the borders of element, we can also add images to the borders of web page background body with the help of the body HTML property and the border image property. The below example shown below illustrates how to add images to the background border of web pages.

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .border_radius{
         border: 15px solid transparent;
         border-image-repeat: round;
         border-image-slice: 40;
         border-image-width: 10px;
         border-image-source: url(/html-attributes.png);
         text-align: center;
      }
   </style>
   
   <title>ILLUSTRATION OF THE BORDER IMAGE PROPERTY</title>
</head>
<body class="border_radius">

   <p>This shows the border image added to the background body of the web page</p>
      
   
</body>
</html>
ILLUSTRATION OF THE BORDER IMAGE PROPERTY
This shows the border image added to the background body of the web page

CONCLUSION

Now you have learnt how to use the border image property, you can as well choose between using the CSS colors or images to style your border. You can as well use images for the whole page background borders depending on your choice of customization. Lets move on to the next topic on CSS 2D TRANSFORM

What do you think?

css rounded corner

CSS ROUNDED CORNER | Add Round Corners to Elements Using CSS

css 2d transform

CSS 2D TRANSFORM | Transform Element In Two Dimension Using CSS