Search code examples
htmlcssrounded-cornersdropshadow

Rounded box-shadow on square box

With this:

div {
    width: 200px;
    height: 100px;
    background-color: green;
    box-shadow: 0px 0px 15px #000
}

I get a rectangle with drop shadow. See https://jsfiddle.net/df9dfev5/ The problem is that the shadow has rounded corners. How can this be avoided?

Solution

  • Less blur and lighter color maybe like this

    https://jsfiddle.net/df9dfev5/3/

     div {
    width: 200px;
    height: 100px;
    background-color: green;
    -moz-box-shadow: 0 0 5px 5px #666;
    -webkit-box-shadow: 0 0 5px 5px #666;
    box-shadow: 0 0 5px 5px #666;
}

    Look at this article http://www.css3.info/preview/box-shadow/