Creating a Fuzzy Border in CSS 3

Can I blur the border of a div? CSS

You can use box-shadow for this purpose.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=b

body {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;
}

div {
  width: 25vw;
  height: 25vw;
  background: royalblue;
  box-shadow: 0 0 10px navy;
}

<div></div>

Blur the border of an Image

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" />

Blur the edges of an image or background image with CSS

If what you're looking for is simply to blur the image edges you can simply use the box-shadow with an inset.

Working example:
http://jsfiddle.net/d9Q5H/1/

HTML:

<div class="image-blurred-edge"></div>

CSS

.image-blurred-edge {
    background-image: url('http://lorempixel.com/200/200/city/9');
    width: 200px;
    height: 200px;
    /* you need to match the shadow color to your background or image border for the desired effect*/
    box-shadow: 0 0 8px 8px white inset;
}

CSS for fuzzy outline around input elements

it looks like a browser default behavior, but you can fake it with css3 box-shadow

http://jsfiddle.net/meo/BndwU/

or with your colours:
http://jsfiddle.net/meo/BndwU/1/

or with bonus focus animation:
http://jsfiddle.net/meo/BndwU/2/

---

Related Topics