How do you get the rounded corner background effect using CSS and HTML?

aka_ultramind

New member
I'm trying to remodel my website. Its probably gonna take me a few months with my current knowledge of HTML,CSS and PHP but I know enough to keep me going and I'm learning all kinds of new stuff everyday.

Anyways I'm trying to create an effect on my site that I'm having a hard time rendering. If you look at this current page you will notice that the background of the main page is blue "#7FB3CC" to be exact.

Now the inner dialog is about 150 px from the outside of the main page on both sides creating a hovering main dialog box with a shadow on the sides. This is the effect that I'm after. I keep setting my page properties so that the background is green in my case. This I do by creating a body style with a green background. When I try to create a main content <div> so that all the content of the page is within this box, what ends up happening is all the content is showing up under the main content box on the green main backround. The smaller content box's that should display within the main white background content box ends up resting on to of the inner content boxes.

Not only do I want this effect of having white on green but the corners need to be rounded. Is it possible to create the rounded corner effect purely with CSS or do I have to create some graphics for the corners.

So with that being said how do I incorporate all of this into my web site. If it helps I'm using Adobe Dreamweaver CS5 which I must say is spectacular!

Is there any good online tutorials that anyone can recommend on HTML and CSS? Thanks for your help.

Cheers.
 
Back
Top