Working with borders in CSS
| Previous | Home | Next |
Border Style
The border-style property specifies what kind of border to display.
| Border-style | Values: |
| dotted: | Defines a dotted border |
| dashed: | Defines a dashed border |
| solid: | Defines a solid border |
| double: | Defines two borders. The width of the two borders are the same as the border-width value |
| groove: | Defines a 3D grooved border. The effect depends on the border-color value |
| ridge: | Defines a 3D ridged border. The effect depends on the border-color value |
| inset: | Defines a 3D inset border. The effect depends on the border-color value |
| outset: | Defines a 3D outset border. The effect depends on the border-color value |
| none: | Defines no border |
Border Width
The border-width property is used to set the width of the border.The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
Border Color
The border-color property is used to set the color of the border. The color can be set by:
- name - specify a color name, like "red"
- RGB - specify a RGB value, like "rgb(255,0,0)"
- Hex - specify a hex value, like "#ff0000"
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
Border - Individual sides
In CSS it is possible to specify different borders for different sides.
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
| Previous | Home | Next |