With CSS3, you can easily create rounded borders, add shadow to boxes, and also use an image as a border.

Without using a design software or program, like Photoshop etc.

list of border properties

  • border-radius
  • box-shadow
  • border-image

 

CSS3 border-radius Property

Using this we can easily create borders to box by using “border-radius”.

Border Radius
Border Radius
CSS


div {
border: 2px solid;
border-radius: 25px;
}

 

CSS3 box-shadow Property

Using this we can easily add shadow to box by using “box-shadow”.

Box Shadow
Box Shadow
CSS


div {
box-shadow: 10px 10px 5px #888888;
}

 

CSS3 border-image Property

Using this we can easily add image border to box by using “border-image”.

Border Image
Border Image
CSS


div {
border-image: url(borderImage.png) 30 30 round;
-webkit-border-image: url(borderImage.png) 30 30 round; /* for Safari 3.1-5 */
-o-border-image: url(borderImage.png) 30 30 round; /* for Opera 11-12.1 */
}

 

Full HTML & CSS Code

HTML & CSS


Note : Use border image for above code.
 

Leave a Reply

Your email address will not be published.