Do you want to be a good Web Developer?

Enter Your Email To Get Our Exclusive Tutorials Right In Your Email

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 With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email