Question

I have a PNG that has a drop shadow affect on it…Since I have to place the image in my CSS as a block, rather than the rounded rectangle that it is – how can I maintain that effect with the shadow working with the non-white background?

Right now I have a simple stroke and drop shadow effect to it per here:

https://i.stack.imgur.com/AT52R.png

I have read about shell commands, but is there a CSS property that will allow me to allow my block to look like this? Thanks!

Answer 1

But wait! You can do this entirely without images. Example here. It’s not completely cross browser (IE < 9 won’t handle rounded corners or box shadow), but it’s very close to what you want. Just play around with some values to fine tune it.

div
{
    width: 300px;
    height: 100px;
    border: 3px solid #0088ff;
    border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    padding: 10px;
    box-shadow: 5px 5px 5px 5px #888;
    -ms-box-shadow: 5px 5px 5px 5px #888;
    -moz-box-shadow: 5px 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px 5px #888;
}

In terms of IE compatibility, there’s a good solution here. There are more comprehensive docs on the site, but essentially you download pie.htc, put it in your root folder and add behavior: url(pie.htc) in your CSS file.