CSS3 border allows you to change the look of a css element. CSS border is one of the widely used css property. With CSS3 border property you can specify border style, color and width of a CSS element border.
In this article we are going to discuss CSS3 border property and how to change border color, width and style.
Also try css3 border generator
CSS3 Border Compatibility:
All the browsers support css3 border.
Image may be NSFW.
Clik here to view.
Topics covered:
- border-style
- border-color
- border-width
Let’s discus each of the css3 border property in detail.
CSS3 Border-style:
Every side of a css element border like border-top-style , border-right-style, border-bottom-style, border-left-style can be styled individually. There are different
Type of border style available in css3 are listed below.
- none
- hidden
- dotted
- dashed
- solid
- double
- dot-dash
- dot-dot-dash
- wave
- groove
- ridge
- inset
- outset
Image may be NSFW.
Clik here to view.
[ CSS3 border styles ]
Example of css3 border-style:
.borderStyle{
border-style:dashed;
}
Note: There is no way to control the spacing between dots or dashes.
Image may be NSFW.
Clik here to view.
[ simple css3 dashed border demo ]
CSS3 Border-color:
border-color attribute is to set the color of the border. It can be either hexadecimal value, or RGBA, or Color names like Red, Green, Blue..
Note: we need to set the border-style before using border-color property.
Example of css3 border-color:
.borderStyle{
border-style:dotted;
border-color:#CCC;
}
Image may be NSFW.
Clik here to view.
CSS3 Border-width:
border-width is to control width of the border, measured in px.
Example of css3 border-width:
.borderStyle{
border-style:dotted;
border-color:#CCC;
border-width:5px;
}
CSS3 border all together:
.borderStyle{
border:dashed 7px #0099FF;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:6px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:6px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
CSS3 border radius:
we have discussed CSS3 rounder border seperately. follow the link to article css3 border radius.
Conclusion:
In this basic article we have discussed how to control the css3 border property.
Keywords to here:
- css3 border
- css border
- css3 radius
- border radius css
- css3 border generator
Related posts: