Image Borders in CSS

Amit Merchant · April 11, 2022 ·

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.

Overlapping image borders

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.

👋 Hi there! I'm Amit. I write articles about all things web development. If you like what I write and want me to continue doing the same, I would like you buy me some coffees. I'd highly appreciate that. Cheers!

Comments?