CSS3 rounded corner textbox with style

Question

Im a newbie of css3, although there are a lot of css tool generators outhere, i dont't know how to code this image i provide. Kindly help please??..This will benefit my assignment on one of my major subject. Thanks a lot!

Answer 1

it's very simple in CSS to round the corners of a div use 'border-radius' CSS property on the div tag and place the image within it.

Your HTML will look like this:

<div id=image_box>
<img src='someimagelocation'>
</div>

You will then want to set the size of the dive to the exact width and height of the image and ensure that overflow is set to hidden and that your border radius property is set:

#image_box {
width:200px;
height:150px;
overflow: hidden;
border-radius:0.5em;
}

this should give you your desired result!

ADDED:

To add dropshadow etc, use the CSS property 'box-shadow' in the same div CSS tag.

box-shadow:0 1px 2px #aaa;

You will need to google how these syntax work. But I have given you all the necessary tools to research it very easily

Answer 2

The trick is to use box-shadow multiple times:

box-shadow: 0 4px 6px -5px hsl(0, 0%, 40%), inset 0px 4px 6px -5px black;

Demo: http://jsfiddle.net/wUgXk/1/

If you're on Google Chrome, open up Inspector, click on one of the values (4px, for instance) and press your Up and Down keys. You can tweak the values in real time and setup these kinds of effects pretty quickly.