You need to put the shadow on the division when it has a radius corner and we have to use a class to do that in web studio. Then make the radius match your web studio shape.

Css3 Box Shadow

If you are not familiar with web studio refer to the instruction page

<- How to place a shadow on the  "shapes" from
    Web Studio draw with the radius corners.

Adding shadows to images using CSS3

How to place a shadow on Images like the example below left

This uses css "box shadow" box-shadow: 3px 3px 4px black;
The first two 3px 3px is how far the background shadow is offset
The third 4px is how much it is blurred, then it's color.

There is more you can do but that's the basics
Box Shadows can be seen in IE9 and all the normal browsers

This is the tricky part.
You can't tell what size radius web studio uses so you have to try different radii in the code.
The boxes I used above have 15px radius corners, you'll have to preview in a
normal browser to see what will match yours.
Once I got it, I just copied my boxes from there so they match,
good thing is when you copy them they will save the class inside.

Put your image on the page and select it.
Go to the HTML tab, and in Insert Object HTML select Inside Object

Adding shadows to radius corner shapes

Draw your shape with the radius corners and select it.
Go to the HTML tab, and in Insert Object HTML select Inside DIV

Go to the HTML tab, and in Insert Page HTML select Inside HEAD

Web Studio Next

Every little bit helps to keep this site up and running, thank-you.


These effects are not officially part of Web Studio
If you have questions see the custom coding page