Box shadow circle

css, html

Solution

I'd suggest:

div {
    width: 50px;
    height: 50px;
    background-color: #e65525;
    border-radius:50%;
    box-shadow: 0 0 0 3px #e78267;
}

JS Fiddle demo.

The problem you had was in your `box-shadow: 3px 3px 3px #e78267;` line, in turn:

- `3px` (the first) is the horizontal offset,

- `3px` (the second) is the vertical offset,

- `3px` (the third) is the 'blur' distance.

I've changed that to `box-shadow: 0 0 0 3px #e78267;`, because:

- a zero offset (for both horizontal and vertical) means the shadow is centred around the shape itself,

- the third zero provides a blur distance of 0, annd

- the `3px` gives a 'spread' (so you that a solid 'shadow' is given, rather than a blurred shadow).

References:

- `box-shadow` (MDN: CSS).

- `box-shadow` (W3.org.

Problem

I want to make shadow in circle like this I have tried this: ``` width: 50px; height: 50px; background-color: #e65525; border-radius:50%; box-shadow: 3px 3px 3px #e78267; ``` but it's doing not that what i need. how can I improve that? JSFIDDLE

Original source