CSS3 Border

CSS3 Border

With CSS3 Borders you can give many effects to browsers like make rounded borders, add shadows to borders and use images as a border.


The properties of CSS3 Borders are

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


  • border-radius

    border-radius is used to round the corners of the borders.

    Example of border-radius

    div
    {
    border-radius:10px;
    }
    

    Or You can give different border for different corner
    div
    {
    border-radius:10px 20px 5px 15px;
    }
    



    border-image

    border-image is used to set the image as a borders.


    Example of border-image

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



    box-shadow

    box-shadow is used to give shadow to borders.


    Example of box-shadow

    div
    {
    box-shadow: 10px 20px 20px grey;
    }
    
    PrevNext

    Join Us And Get Our Latest Tutorials Updates Via Email