Sambariprasad

Rounded Corners
The number one rule of Web 2.0: If it has rounded corners, it's modern.
Say what you will about the design aesthetics of rounded corners, at least with the new border-radius rules you won't have to resort to images and JavaScript to get that web 2.0 look.
Say you have some HTML that looks like this:

Add this style definition to round off the element:
.r-box {
background-color: #666;
color: #fff;
line-height: 20px;
width: 200px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
Here's a live demo for those of you with Firefox or Safari:
Try doing this without images

If you're using a different browser here's a screenshot of how Safari displays the above block:


So what did we do? Well the first five lines are your normal CSS 2 declarations to give things a bit of style. It's the last two lines we're interested in. The actual CSS 3 declaration is border-radius. Until the specs are finalized the various browser manufacturers have enabled the features via prefixes -- the -moz- prefix is what Firefox uses and the -webkit- prefix is for Safari.

The rule works like this (where TopLeft, TopRight, etc... is a numeric value in pixels):

border-radius: TopLeft TopRight BottomRight BottomLeft;
border-radius: TopLeft BottomLeft+TopRight BottomRight;
border-radius: TopLeft+BottomRight TopRight+BottomLeft;
border-radius: ALL;

So in our case we used the later rule, but if you want just two rounded corners, you would do this:

-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topright: 10px;

Note: as of this writing, the W3C is planning to move toward the syntax Mozilla uses, rather than that of Safari. Because the border-radius spec is not finalized, Opera chose not to support it in Opera 9.5.

The nice thing about border-radius is it degrades gracefully. If a browser doesn't understand it, it simply renders a square box.

For a solution that uses CSS 3's border-radius in capable browsers with a fallback to corner images in IE, see here. The advantage is that the modern browsers don't get slowed down by lots of corner images.
Borders

Borders get some significant new features in CSS 3 as well, like support for gradients. Here's what the rule looks like for Firefox:

#box {
border: 8px solid #000;
-moz-border-bottom-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
width:400px;
}

Which gives you this:

Gradient borders are cool

For those you not using Firefox 3, here's what you'd see:

Image:css3_shot3.jpg

As of this writing, Safari and Opera don't have border support.

Feel free to edit this article when they do
Drop Shadows

Although it isn't technically new, creating text shadows is now very simple. It was originally proposed for CSS 2.1 and Safari has supported it since version 1. It simply requires a text-shadow property:


The first two numbers control the offset, which is 2px down and 2px right. The last number sets the shadow spread. If you want shadows above the text, just use negative numbers. Here's a live sample:

If you have Safari 3, Opera 9.5, Firefox 3.1a, Konqueror or iCab this paragraph should have a gray drop-shadow.

And an image version shot in Safari:

Image:css3_shot2.jpg

Some browsers (most notably Opera and Firefox 3.1a) even support multiple shadows, which means you can do complex gradient effects not unlike Photoshop -- create flaming text using CSS alone.
Image Tricks

This one really takes your designs out on a limb. As of now, only the WebKit nightly builds support masking properties, but Firefox 3.1 and Opera will have them soon enough. The idea is to apply a transparent mask over an image, video or any other element.

In Safari the rules look like this:

-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-origin (background-origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)