Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via 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

    Are You Starting A New Blog
    Do You Want Best Web Hosting?

    Try World's Best Web Hosting Provider BlueHost
    At Just $3.95/mo

    Hurry Up! Limited Time Offer

    Yes, I Want To Check Out BlueHost

    Check The World's Best SEO And All-In-One Marketing Toolkit
    For Digital Marketing Professionals SEMRUSH

    Check Out SEMRUSH