Select Chapter ❯
CSS Tutorial
- CSS Introduction
- CSS Syntax
- CSS Insert CSS
- CSS Backgrounds
- CSS Text
- CSS Dimensions
- CSS Border
- CSS Margin
- CSS Padding
- CSS Display
- CSS Positioning
- CSS Float
- CSS Pseudo-Class
- CSS Opacity
- CSS Media Types
CSS3 Tutorial
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-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;
}