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”.
div {
border: 2px solid;
border-radius: 25px;
}
CSS3 box-shadow Property
Using this we can easily add shadow to box by using “box-shadow”.
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”.
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
Note : Use border image for above code.
Meet Mukul, a passionate visionary and a dedicated 3D printing enthusiast. With an insatiable curiosity for technology and a flair for creativity, Mukul has discovered a world where innovation knows no bounds. Armed with a deep understanding of 3D printing and its endless possibilities, he has become a true pioneer in the field, constantly pushing the boundaries of what can be achieved with this remarkable technology.