CSS3 Box with rounded corners and drop shadow. CSS guides, tutorials and help

Date Posted: Thursday 24th of November 2011 | Category: CSS

CSS3 Box with rounded corners and drop shadow
I was looking for some information on how to create a rounded box with drop shadow using CSS3.

The good news, it works in Firefox, Chrome, Safari, Opera.

The bad news, It does not work in Internet Explorer 7 or 8. You will now download Internet Explorer 9. However you must be running Windows 7.

Just copy and paste the code below in your .html file to see the results.

<style type="text/css">
body {
background-color: #c7c7c7;
}

.font_titles {
font-family:arial;
font-size:28px;
font-weight:bold;
color:#781577;
}

.font_text {
font-family:arial;
font-size:12px;
color:#781577;
}

.curved_corners
{
border:2px solid #BBBBBB;
padding:30px 30px;
background:#FFFFFF;
width:700px;
height:180px;
border-radius:20px;
-moz-border-radius:20px; /* Firefox 3.6 and earlier */

/* Creating the shadows */
box-shadow: 2px 2px 15px #888888;
-moz-box-shadow: 2px 2px 15px #888888;
-webkit-box-shadow: 2px 2px 15px #888888;

}

.spacer {
margin-top:15px;
}

</style>
<body>
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><div class=curved_corners>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<span class="font_titles">CSS3 - Where are the gifs?</span><br><br>
<span class="font_text">This box with rounded corners and a drop shadow was created using CSS3.<br>There are no gif's, which means no more hassles with Photoshop.<br><br>The good news. This works in the latest versions of Firefox, Chrome, Safari and Opera.<br><br>The bad news. This does not work in Internet Explorer 8. You will need to download Internet Explorer 9.<br>You cannot install Internet Explorer 9 if you are running Windows XP. You need to be running or should I say Buy Windows 7.</span></td>
</tr>
</table>
</div>
</body>