CSS Rules Part 3
Home > Build > Programming
> CSS
by
Don Herion
(1)
(2) (3) (4)
'border-top-width,
border-right-width, border-bottom-width, border-left-width,'
This
defines the border width of a designated side of an element. Borders come between
the margin and padding. Your choices are:
thin
medium (default)
thick
inherit
| body {border-top-width: thick} |
'border-width'
This defines the border width for all sides of an element. Borders come between
the margin and padding. A single value defines all padding widths to that element.
Two values sets the top/bottom padding to the first value and left/right padding
to the second value. Three values sets the top padding to the first value; left
and right padding to the second value; and bottom padding to the third value.
Your choices are:
thin
medium (default)
thick
inherit
| border - 1 value |
| body {border-width: thin} |
| Creates thin border to all 4 sides of an element |
| border - 2 values |
| body {border-width: thin thick} |
| Creates thin border to the top and bottom; and a 150px
padding for the left and right |
| border - 3 values |
| body {border-width: thin thick medium} |
| Creates thin border to the top; thick border for the
left and right sides and a medium border for the bottom |
'border-top-color,
border-right-color, border-bottom-color, border-left-color,'
This
defines the border color of a designated side of an element. Your choices are:
Any
valid color name
RGB Value
inherit
| body {border-top-color: green} |
'border-color'
This defines the border color for all sides of an element. A single value defines
all padding widths to that element. Two values sets the top/bottom padding to
the first value and left/right padding to the second value. Three values sets
the top padding to the first value; left and right padding to the second value;
and bottom padding to the third value. Your choices are:
Any
valid color name
RGB Value
inherit
| border-color - 1 value |
| body {border-color: red} |
| Creates red border to all 4 sides of an element |
| border-color - 2 values |
| body {border-color: red blue} |
| Creates red border to the top and bottom; and a blue
border for the left and right |
| border-color - 3 values |
| p {border-color: red blue rgb(255,
255, 100)} |
| Creates red border to the top;
blue border for the left and right sides and a yellowish border for the bottom |
'border-top-style, border-right-style,
border-bottom-style, border-left-style,'
This defines the border
style of a designated side of an element. The border style comes between the margin
and padding. Your choices are:
none
hidden (specifies no
border)
dotted
dashed
solid
double
groove (a 3d line)
ridge (a raised border)
inset (3d inset border)
outset (3d outset border)
inherit
| p {border-top-style: double solid} |
'border-style'
This defines the border style for all sides of an element. A single value defines
all styles to that element. Two values sets the top/bottom styles to the first
value and left/right styles to the second value. Three values sets the top styling
to the first value; left and right styles to the second value; and bottom styles
to the third value. Your choices are:
none
hidden (specifies
no border)
dotted
dashed
solid
double
groove (a 3d line)
ridge (a raised border)
inset (3d inset border)
outset (3d outset border)
inherit
| border-style - 1 value |
| body {border-style: double} |
| Creates double line style to all 4 sides of an element |
| border-style - 2 values |
| body {border-style: double solid} |
| Creates double line style to the top and bottom; and
a solid style line for the left and right |
| border-style - 3 values |
| body {border-style: double dashed dotted} |
| Creates double line style to the top; solid style line
for the left and right sides and a dotted line style for the bottom |
'border-top, border-right, border-bottom,
border-left,'
This defines several border properties at one time
for one side of a designated element. You set this order:
width
style
color
inherit
| p {border-top: thick dashed green} |
'border'
This defines all border properties for every side of an element. You set this
order:
width
style
color
inherit
| border |
|
body {border: thick dashed green} |
| Creates
thick green dashed border to all 4 sides of an element |
