dipsi dipsi - 4 months ago 20
CSS Question

Blur the border of an Image

My question is how can I blur only the border of an image?
The image itself should not be blured, just the border.

If anyone could help me, that would be awesome!

Answer

Looking at your comments on Sagar Kodte's answer, is this what you wanted?

img {
  border: 2px solid #000;
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.8);
}
<img src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" />

I added a border of 2px to the images and a box shadow.

"Out there" idea:

I'll preface this by saying css variables are coming in fast but are not everywhere yet (Just IE lagging behind I think).

That being said I think they are a wonderful idea and will put this answer here just so you know of their existence.

.red {
  --border-color: #900;
}
.green {
  --border-color: #090;
}
.blue {
  --border-color: #009;
}
.clown {
  --border-color-top: green;
  --border-color-right: yellow;
  --border-color-bottom: red;
  --border-color-left: blue;
}
img {
  border-top: 2px solid var(--border-color-top, var(--border-color, #000));
  border-bottom: 2px solid var(--border-color-bottom, var(--border-color, #000));
  border-right: 2px solid var(--border-color-right, var(--border-color, #000));
  border-left: 2px solid var(--border-color-left, var(--border-color, #000));
  box-shadow: 0 -4px 10px -1px var(--border-color-top, var(--border-color, #000)), 4px 0 10px -1px var(--border-color-right, var(--border-color, #000)), 0 4px 10px -1px var(--border-color-bottom, var(--border-color, #000)), -4px 0 10px -1px var(--border-color-left, var(--border-color, #000));
  margin: 10px;
}
.img {
  border: 2px solid var(--border-color, #000);
  box-shadow: 0 0 10px var(--border-color, #000);
  margin: 10px;
}
<b>Standard:</b>
<br>
<img src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" />
<br>
<b>Single color:</b>
<br>
<img class="red" src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" />
<img class="green" src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" />
<img class="blue" src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" />
<br>
<b>Mulitple colors:</b>
<br>
<img class="clown" src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" />

Comments