Creating a Fuzzy Border in CSS 3

Question

Here\'s my source image:

And my source image zoomed in:

Answer 1

This is actually done with two CSS3 box-shadows.

CSS:

#fuzz
{
    height: 100px;
    width: 100px;
    border-radius: 5px;
    border: 1px solid #333;
    box-shadow: 0px 0px 5px #333, inset 0px 0px 2px #333;
}

You can see it in action when i get back to real computer to edit the fiddle :-) (using my tablet now)

Obviously change the colors to your taste :)

Answer 2

You can probably just get away with setting the border to a light colour and outline to a darker colour, then just set the border-radius. Note I haven't tested this, and if memory serves the outline does not curve with border-radius. Also note that border-radius requires several attributes to be set to become cross-browser compatible. Refer to http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/ for more info.

If this fails, you could always use an inner-div, which you set to position absolute, left 0, right 0, top 0 and bottom 0 and then use that as either the inner or outer border. Setting the border-radius will definitely work then.

Regards, Richard

Answer 3

It's just using two box shadows, one inset and the other outset, i.e:

.box {
  width: 100px;
  height: 100px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 -3px 3px rgba(0,0,0,0.1);
  border: solid #ccc 1px;
  border-radius: 10px;
  margin: 50px 0 0 50px;
}

See it here: http://jsfiddle.net/WYLJv/

Answer 4

I'm a bit late but, yes, use border radius and box-shadow(s) and you should be good to go.

.block {
  border-radius:6px;
  box-shadow: inset 0px 0px 2px 2px #aaa, 3px 3px 5px 0px #eee;
}

Answer 5

Look at css3 property border-radius. It has options for x and y offset color and the blur radius. In your case a greyish color no offset and blur if 4px ought to work.

Answer 6

Update: I've removed the vendor prefixes, since almost every browser that supports these properties do not need them. Dropping them is considered a best practice at this point.

See Caniuse page for border-radius and box-shadow.

the best (and only) way to do this is to use multiple box-shadows:

element {
    box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px;
    border-radius: 20px;
}

box-shadow works like this:

box-shadow: [direction (inset)] [color] [Horizontal Distance] [Vertical Distance] [size]; 

border-radius works like this:

border-radius: [size];

/*or*/

border-radius: [topleft/bottomright size] [topright/bottomleft size];

/*or*/

border-radius: [topleft] [topright] [bottomright] [bottomleft];

you can specify the Height an length of the curve like this:

border-radius: [tl-width] [tr-width] [br-width] [bl-width] / [tl-height] [tr-height] [br-height] [bl-height];