visitor activity monitorvisitor activity monitor

PROJECT CODE

                                            The Developers Choice!!!!
                                                                                                            Home | About Us | Contact Us

CSS TUTORIALS

Border:

How to use Table Borders
border-style values:

none: Defines no border


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

 


What is 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.
Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.
How to use Border Width
Example
p.one {
border-style: solid;
border-width: 10px;
}
p.two {
border-style: solid;
border-width: medium;
}
What is 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 "#ffE6E6"
You can also set the border color to "transparent".
Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.
How to use Border Color
Example
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: #FF0000;
}
   
What is Border - Individual sides
In CSS it is possible to specify different borders for different sides:
How to use Border Color
Example
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
The example above can also be set with a single property:
Example
p {
border-style: dotted solid;
}

What is Border - Shorthand property
The border property is a shorthand for the following individual border properties:
  • border-width
  • border-style (required)
  • border-color
Example
p {
border: 10px solid blue;
}
All Rights Reserved with Project code