Adding a blurred border in CSS

Question

Using CSS, how can I add a border of 100px to all sides of an image that is made up of the perimeter pixels stretched out and blurred? e.g. the border to the left of the image is just columns 1-3 stretched horizontally and blurred together?

I see other posts explaining how to keep the edges sharp but blur the center.

Answer 1

If you want to blur an image to the edges and if you have one single background-color then you could use the box-shadow with inset to archive your desired behavior:

box-shadow: inset 0px 0px 40px 40px #DBA632;

where #DBA632 is your background-color.

See this snippet:

body {
  background: #DBA632;
}
div {
  background: url('https://placekitten.com/500/300');
  width: 500px;
  height: 300px;
  margin: 50px;
  box-shadow: inset 0px 0px 40px 40px #DBA632; /* change to alter the effect*/
}

<div></div>

---

Old answer:

Are you looking for something like this?

box-shadow: 0px 0px 40px 40px #000000;

The first two values set the offset of the shadow, the third value is the amount of blur and the last value is the spread of the shadow.

You can play with those values to see how they change the effect: DEMO

Answer 2

box-shadow is what you want. I put some links below that will teach you everything you need to know about it:

http://www.css3.info/preview/box-shadow/

http://www.w3schools.com/cssref/css3_pr_box-shadow.asp