The level 3 of Cascading Style Sheet or better known as CSS3 has a new features of like – the text shadows, border with images, opacity, multiple backgrounds, ect, just to name a few.
In this article we only give a few simple samples how to create and use CSS3 new features.
CSS3: Border
A guide to creating rounded border with CSS3’s border-radius property and the box-shadow property is used to add shadow to boxes.
CSS3: Border with Image
With the CSS3 border-image property you can use an image to create a border.
Border image stretched
The original image used to create the border above : 
CSS3: Backgrounds
CSS3 contains several new background properties such as:
- background-size
Background stretched:
Background resize:
Multiple background image:
If you want to mix two or more pictures as a background, you can add in CSS3.
The background image we use for the image above is: 
and 
- background-origin
The background-origin property specifies the positioning area of the background image. The background can be placed within the content-box, padding-box, or border-box area.
- background-clip
Specify the painting area of the background
CSS3: Text Effects
CSS3 contain several new text features like:
- word-wrap
In CSS3, the word-wrap property allows you to force the text to wrap – even if it means splitting it in the middle of a word.
Without word-wrap
With word-wrap:break-word
- text-shadow
The text-shadow property applies shadow to text.
We will provide another features sample of CSS3 on the next article. If you have any queries please Contact Us