✖

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 ❯