CSS3 Rounded Corners

CSS3 Rounded Corners

Adding rounded corners in CSS2 was tricky. We had to use different images for each corner.

In CSS3, creating rounded corners is easy.

In CSS3, the border-radius property is used to create rounded corners:

This box has rounded corners!

Here's the code of this:

1. border:2px solid;
2. border-radius:25px;

Multiple Background images with CSS3

Layering multiple background images
The background of a box can have multiple layers in CSS3. The number of layers is determined by the number of comma-separated values in the ‘background-image’ property. Note that a value of ‘none’ still creates a layer.


Here’s a example:

Here’s the code for this:

1. width: 500px;
2. height: 150px;
3. background-image: url(boll.png),  url(VectorBackgrounds11.jpg);
4. background-position: center bottom, left top;
5. background-repeat: no-repeat;

Text-shadow using CSS3

Text-shadow using CSS3


CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow. The text-shadow property is used as follows:

1. text-shadow: 2px 2px 2px #000;

The text-shadow property is supported in all major browsers, except Internet Explorer. The text-shadow property applies shadow to text.

1. text-shadow: horizontal-shadow vertical-shadow blur color;

The text-shadow property attaches one or more shadows to text. The property is a comma-separated list of shadows, each specified by 2 or 3 length values and an optional color. Omitted lengths are 0.

1. text-shadow: 0 0 4px white, 0 -5px 4px #FF3, 2px -10px 6px #FD3, -2px -15px 11px #F80, 2px -25px 18px #F20;

Hello Text Shadow

CSS3 border-image using images for your border

Another exciting new border feature of CSS3 is the property border-image. With this feature you can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image and border-corner-image. These two values are shorthands for:

• border-image:
  • border-top-image
  • border-right-image
  • border-bottom-image
  • border-left-image

• border-corner-image:
  • border-top-left-image
  • border-top-right-image
  • border-bottom-left-image
  • border-bottom-right-image

1. border-image: url(border.png) 27 27 27 27 round round;

Hello Border Image