One of the great things about CSS3 is that it allows you to do even more subtle styling than before.

Today, we'll look at rounded corners, drop shadows and opacity.

Rounded corners

You can now apply rounded corners to an element in HTML. This is done using the border-radius property. If you want the corners to look all the same, you only need to use one number for example:

Here's a border all the way around.

This would be coded in CSS:

.bordersample2 {
 border-radius: 15px 50px;
 background: #dddddd;
 color: #fff;
 padding: 20px;
 width: 200px;
 height: 75px;
 }
            

You can also do different corners. They go in the order: So if you wanted a bigger curve on the top left and bottom right, you'd do this:

Here's a border with different sized edges

.bordersample 
{ border-radius: 25px; 
background: #dddddd;  
color: #fff;  
padding: 20px;  
width: 200px;  
height: 75px;  }

According to the W3C:

• Four values: first value applies to top-left, second value applies to top-right, third value applies to bottom-right, and fourth value applies to bottom-left corner
• Three values: first value applies to top-left, second value applies to top-right and bottom-left, and third value applies to bottom-right
• Two values: first value applies to top-left and bottom-right corner, and the second value applies to top-right and bottom-left corner
• One value: all four corners are rounded equally

These are all short forms: The border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

Or, you could use this tool to help you write the code.

Drop Shadows

Drop shadows can be added to text or to elements that are boxes. You use the properties:

• box-shadow
• text-shadow

When doing simple shadows, you offset the shadow by a horizontal value first, and then a vertical value, followed by the shadow color:

.simpleshadow 
{text-shadow: 2px 2px #F00;}
            

Simple shadow

Obviously, that's a little hard to read, so you'll need to add a third value, blur:

.simpleblur  
{text-shadow: 2px 2px 5px #F00;} 

Simple shadow blur

If you want the shadow to go in another direction, you can offset using negative values:

.simpleshadow-back  
{text-shadow: -2px -2px 5px #F00;}    

Simple shadow back

You can also combine these for interesting effects. Check out the W3C help page for more samples and an interactive tutorial.

And if you want the quick and dirty tools to help you write this code, you can find the box-shadow tool here and the text-shadow tool here.

Opacity

Opacity is the measurement of how much light can pass through an image or bit of text. Essentially it allows you to create layers and semi-transparent images.

There are two ways you can do it. One is to use the opacity property. The lower you set the value the more transparent the text. For example, here's a div with a solid color in the bg:

This would look like so in the CSS:

.opacity-50 {
 width: 200px;
 height: 150px;
 padding-top: 5px;
 padding-right: 5px;
 padding-bottom: 5px;
 padding-left: 5px;
 background: #FF0000;
 opacity: 0.5;
 }

You can see the problem though, can't you? It makes the text of the div (which is a child element) opaque as well.

If you want to avoid that problem, you can set the opacity using the color value, this way it will just apply to the background.

.opacity-rgb {
width: 200px;
height: 150px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
background-color: rgba(255,0,0,0.50);
}

So instead of the hexidecimal values (the colors starting with a #) you have red, green, blue, and then the alpha channel, which is where you can drop in your opacity. Like the first rule, the smaller the number, the MORE opaque the bg will be.

Another, even simpler option, is to create a small transparent images that you can drop into your background and repeat. You can give that a go in the Extra Exercise I've provided here.