CSS3 border

CSS3 border is a kind of proof of style sheets what relieves suffering from using other graphics applications
That is why any kind of design program (such as Photoshop) is not required.
By this the rounded borders, shadow borders and image-based border, etc. can be made Easily.
Originally three features are used to create a border.
These are:
Border-Radius
Box-Shadow
Border-image

Browser Support:
Internet Explorer 9 supports two new border properties; prefix-moz- is needed for the Firefox border image.
For Chrome and Safari the prefix-webkit is required.
Prefix-0 is needed for the border-image on Opera.
Opera supports the new border properties.
Border Radius:
It was a little complicated to add round border on CSS2. We had to use a different image for each angle.
But it is quite easy to create rounded corners in CSS3. border-radius property is used To create rounded corners in CSS3.
The values of this property are the length (px, em, cm) or percent (%).The default value is zero (0).

Table: CSS Border-Radius property.
Syntax:
Example:
Output:

Box-shadow:
Box-shadow property is used to add a shadow of box on css3. Prefix is not required for browser as the Property is W3C standard.
Syntax:
Example:
Border-image
the image can be used as a border by the help of border-image on css3. Internet Explorer does not support these properties. The values of this property are —

Example: CSS border-image-repeat.

Leave a Reply

Your email address will not be published. Required fields are marked *