✖

All TalkersCode Topics

Follow TalkersCode On Social Media

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 ❯