CSS Rounded Corners and Shadows

Adding rounded corners with borders and shadows has gotten easier than ever with CSS.
You can add them to images or just about anything.

A box with rounded corners and some color can be a great way to spice up a pages Look and Feel on any site. Checkout the samples below.

The CSS code:

#roundedbox {
padding: 5px;
width: 310px;
background-color:#d9d9d9;
border-width:1px;
border-style:solid;
border-color:#000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

The HTML Code:

<div id=”roundedbox”>
This is a box with rounded borders. Enter any text you like to highlight or add emphasis to something on your pages.
</div>

Now we can take the same box and add a different background color and some shadow effect to it as well. The shadow really brings out the box and makes it standout on the page.

The CSS code for rounded box with Shadows:

#roundedbox-shadow {
padding: 5px;
background-color: #C7E9F9;
-moz-box-shadow:3.5px 3.5px 5px #000000;
-webkit-box-shadow:3.5px 3.5px 5px #000000;
box-shadow:3.5px 3.5px 5px #000000;
border-width:1px;
border-style:solid;
border-color:#000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

The HTML code for the rounded box with shadow effect:

<div id=”roundedbox-shadow”>
This is a box with rounded borders. Enter any text you like to highlight or add emphasis to something on your pages.
</div>

We can add the same effect to images as well. See the examples below.