All CSS3
Inaam  

CSS3 Borders

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
<!DOCTYPE html>
<html>
    <head>
    <style>
    div.borderRadius {
        border: 2px solid #a1a1a1;
        padding: 10px 40px;
        background: #dddddd;
        width: 300px;
        border-radius: 25px;
    }
    div.boxShadow {
        width: 300px;
        height: 100px;
        background-color: yellow;
        box-shadow: 10px 10px 5px #888888;
    }
    div.borderImage {
        border: 15px solid transparent;
        width: 250px;
        padding: 10px 20px;
    }
    #round {
        -webkit-border-image: url(borderImage.png) 30 30 round; /* Safari 3.1-5 */
        -o-border-image: url(borderImage.png) 30 30 round; /* Opera 11-12.1 */
        border-image: url(borderImage.png) 30 30 round;
    }
    #stretch {
        -webkit-border-image: url(borderImage.png) 30 30 stretch; /* Safari 3.1-5 */
        -o-border-image: url(borderImage.png) 30 30 stretch; /* Opera 11-12.1 */
        border-image: url(borderImage.png) 30 30 stretch;
    }
    </style>
    </head>
    <body>
        <div class="boxShadow"></div>
        <div class="borderRadius"></div>
        <div class="borderImage" id="round"></div>
        <div class="borderImage" id="stretch"></div>
    </body>
</html>

Note : Use border image for above code.
 

Inaam

Leave A Comment