Image border using CSS
How to use image as border using CSS
Styling webpages with border but in this post we are going to discuss how to make an image as border. So here are some samples i am going to share which i tested as border image given below.
In above image we used four different images as border and see how beautiful they look.
Here are the codes for above images , after that we will discuss what are the important parts in css for making image as border.
<div class="gb_border"> <img src='https://i.pinimg.com/564x/c7/c1/a7/c7c1a7d240c9c302c2147c7b81df832e.jpg' class="pic" /> </div>
.gb_border{
border:15px solid transparent;
border-image:url('https://i.pinimg.com/564x/05/eb/68/05eb6880d593d32415e11907cad6e82d.jpg') 30 round;
width:150px;
height:220px;
margin:0 auto;
}
.pic{
width:150px;
height:220px;
}
important part in this CSS is : border-image
If we see in above code we used border as transparent so that border size which is 15px will remain there but instead of color it will become transparent and that is why the border-image will get displayed instead of border color.
In this border-image: url(‘url of image’) size type; there are two types which we can use either round or stretch.
that’s it , hope our reades enjoy this post.
This tutorial is available on Codepen too where we can test with live preview : https://codepen.io/guideblog/pen/NWzMBqJ
You may interested in knowing few more css things ? Here are some good post :-
