Image Borders in CSS
If you’re a web developer, you pretty much have worked with different kinds of borders in CSS. Borders can come in all the different shapes and sizes.
But recently, I got to know that there are image borders as well that you can create using CSS.
Essentially, an image border around elements can be created by amalgamating a bunch of border-image-* properties.
The implementation
So, for instance, if we want to create an image border around a box, here’s how we can do it.
.box {
border-style: solid;
border-image-source: url(https://picsum.photos/id/1016/3844/2563);
border-image-width: 20px;
border-image-slice: 50;
border-image-repeat: stretch;
}
As you can tell, here, setting border-style to solid will establish a single, straight, solid line for the image border.
The border-image-source property is used to set the source image used to create the box’s border image.
The border-image-width property sets the width of the box’s border image.
The border-image-slice property divides the image specified by border-image-source into regions and then, these regions form the components of the box’s border image.
And lastly, the border-image-repeat property defines how the edge regions of a source image are adjusted to fit the dimensions of the element’s border image.
Here’s how putting this all together would look like.
See the Pen Box Without A Gradient Shadow by Amit Merchant (@amit_merchant) on CodePen.
Gotcha
One thing to keep in mind is when you’re using image borders, it doesn’t respect the content that lies inside the box. So, anything inside the box could overlap on the border as well in certain viewports.
The common fix here is to apply the padding of the same amount as border-image-width so that the content doesn’t overlap on the border. I have done the same in the above example also.
Like this article?
Buy me a coffee
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
