1

I cannot get box-shadow to create a shadow around the entire perimeter of a div. The following works in FireFox, however not in IE 11.

I have tried the following: Internet Explorer - CSS Shadow All Around

Here is a JSFiddle for the problem. CSS:

 .addAccountPanel
 {
    width:250px; 
    height:200px; 
    margin:auto; 
    background-color: rgba(0,0,0, .2); 
    position:relative; 
    box-shadow: 0px 0px 4px #004C7E;
 }

HTML:

  <div class="addAccountPanel"> </div>
Community
  • 1
  • 1
Jaiesh_bhai
  • 1,778
  • 8
  • 26
  • 41
  • Are you sure there's not something else conflicting with this? It works for me even as far back as IE9. – TylerH Mar 19 '14 at 20:43
  • The shadow does not seem as vibrant. You can barely see it on the top and bottom of the div – Jaiesh_bhai Mar 19 '14 at 20:44
  • 1
    That might just be on account of the different rendering methods used across browsers. You can make it more "vibrant" (read: thicker) by changing your value of `4px` to something like `10px` for `box-shadow:` and add a `-moz-box-shadow: 0px 0px 4px #004C7E;` line. – TylerH Mar 19 '14 at 20:47
  • your fiddle works in my IE11 – G-Cyrillus Mar 19 '14 at 21:30
  • I am going with @TylerH's suggestion and specifying thickness for specific browsers. – Jaiesh_bhai Mar 20 '14 at 12:50

1 Answers1

8

There is a fourth parameter in the box-shadow that lets you increase the size of the shadow, and makes it more visible

.addAccountPanel
    {
        width:250px; 
        height:200px; 
        margin:auto; 
        background-color: rgba(0,0,0, .2); 
        position:relative; 
        box-shadow: 0px 0px 4px 2px #004C7E;
    }

fiddle

vals
  • 61,425
  • 11
  • 89
  • 138
  • Thanks this works! If you combine it with TylerH's comment above about specifying for browsers I can give you the answer. – Jaiesh_bhai Mar 20 '14 at 12:51