|
(1) (2) (3) (4) (5) (6) (7) (8) (9) (10)
'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
|
(1) (2) (3) (4) (5) (6) (7) (8) (9) (10) |
