Skip to main content

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 : css-border-image-original

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: css3-papdanlogo  and  css3-flower

  • 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