background image border

Is there a css property to set a border around a background image? I've been searching for that but haven't found it, does it exist or am I left with needing to draw the line manually around my background images?

3 Answers

This can be done by adding image in a div and than set the border of the div

<div> <div...");float:left;"></div> <div> 

Without specific implementation details it's very difficult (if not impossible) to provide a solution that works in all cases. Here's a couple solutions with the constraints provided:

Example 1 - Fixed Size

If you know the height and width of the background image you can do something like this:

div.bg { background-image: url('); border: 5px solid #000; width: 50px; height: 50px; }

<div> </div>

Working example:

Example 2 - Repeating Background Image

If the background image repeats, you can do something like this:

div.bg { background: url(') repeat; border: 5px solid #000; box-sizing: border-box; width: 100%; height: 200px; }

<div> <p>Here is some text to on top of the background image.</p> </div>

Working example:

this can also be done using css drop-shadow

 .box { width:400px; height: 400px; display: flex; justify-content: center; align-items:center; border: 1px solid red; .bgImg{ width: 300px; height: 300px; background: url('); background-repeat: no-repeat; background-size: contain; background-position: center center; filter: drop-shadow(0 0 1px black); } }

<div> <div></div> </div>

the browser support is not perfect