Page 103 - DCAP408_WEB_PROGRAMMING

Unit 4: Cascading Style Sheets

Border Width Notes
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.

Notes The "border-width" property does not work if it is used alone. Use the "border-
style" property to set the borders first.

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"
You can also set the border color to "transparent".

Border - Individual Sides

In CSS it is possible to specify different borders for different sides:
The border-style property can have from one to four values.
 border-style:dotted solid double dashed;

 top border is dotted
 right border is solid
 bottom border is double
 left border is dashed

 border-style:dotted solid double;
 top border is dotted
 right and left borders are solid
 bottom border is double

 border-style:dotted solid;
 top and bottom borders are dotted
 right and left borders are solid
 border-style:dotted;

 all four borders are dotted
The border-style property is used in the example above. However, it also works with border-
width and border-color.

Border - Shorthand Property

As you can see from the examples above, there are many properties to consider when dealing
with borders.

LOVELY PROFESSIONAL UNIVERSITY 97