CSS3 Borders

March 11, 2015
by Inaam Hussain

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.
 

About

Engineer. Blogger. I like to be updated on new upcoming emerging technologies.

Get notified on our new articles

Subscribe to get the latest on Node.js, Angular, Blockchain and more. We never spam!
First Name:
Email:

Leave a Comment