23 September 2011

Border Properties


PropertyDescriptionPossible ValuesExamples
border-top-colorDeclares the color of the top border.Valid color names, RGB values, hexidecimal notation, or the predefined value .
div { border-top-color:green; }div { border-top-color:#00FF00; }
border-top-styleDeclares the style of the top border.
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
div { border-top-style:solid; }div { border-top-style:inset; }
border-top-widthDeclares the width of the top border.Lengths or the following predefined values:
thin
medium
thick
div { border-top-width:2px; }div { border-top-width:thin; }
border-topUsed as a shorthand property to set all the border-top properties at once.Separate values by a space in the following order (those that are not defined will use inherited or default initial values):
border-top-width
border-top-style
border-top-color
div { border-top:2px solid green; }div { border-top:thick double #00FF00; }
border-right-colorDeclares the color of the right border.Valid color names, RGB values, hexidecimal notation, or the predefined value .
div { border-right-color:green; }div { border-right-color:#00FF00; }
border-right-styleDeclares the style of the right border.
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
div { border-right-style:solid; }div { border-right-style:inset; }
border-right-widthDeclares the width of the right border.Lengths or the following predefined values:
thin
medium
thick
div { border-right-width:2px; }div { border-right-width:thin; }
border-rightUsed as a shorthand property to set all the border-right properties at once.Separate values by a space in the following order (those that are not defined will use inherited or default initial values):
border-right-width
border-right-style
border-right-color
div { border-right:2px solid green; }div { border-right:thick double #00FF00; }
border-bottom-colorDeclares the color of the bottom border.Valid color names, RGB values, hexidecimal notation, or the predefined value .
div { border-bottom-color:green; }div { border-bottom-color:#00FF00; }
border-bottom-styleDeclares the style of the bottom border.
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
div { border-bottom-style:solid; }div { border-bottom-style:inset; }
border-bottom-widthDeclares the width of the bottom border.Lengths or the following predefined values:
thin
medium
thick
div { border-bottom-width:2px; }div { border-bottom-width:thin; }
border-bottomUsed as a shorthand property to set all the border-bottom properties at once.Separate values by a space in the following order (those that are not defined will use inherited or default initial values):
border-bottom-width
border-bottom-style
border-bottom-color
div { border-bottom:2px solid green; }div { border-bottom:thick double #00FF00; }
border-left-colorDeclares the color of the left border.Valid color names, RGB values, hexidecimal notation, or the predefined value .
div { border-left-color:green; }div { border-left-color:#00FF00; }
border-left-styleDeclares the style of the left border.
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
div { border-left-style:solid; }div { border-left-style:inset; }
border-left-widthDeclares the width of the left border.Lengths or the following predefined values:
thin
medium
thick
div { border-left-width:2px; }div { border-left-width:thin; }
border-leftUsed as a shorthand property to set all the border-left properties at once.Separate values by a space in the following order (those that are not defined will use inherited or default initial values):
border-left-width
border-left-style
border-left-color
div { border-left:2px solid green; }div { border-left:thick double #00FF00; }
border-colorDeclares the border color of all four borders at once.Valid color names, RGB values, hexidecimal notation, or the predefined value .Separate the color for each border by a space, declaring the colors for the borders in the following order:
border-top-color
border-right-color
border-bottom-color
border-left-color
Undeclared values work as further shorthand notation. If only one color value is declared, all four borders will use that color. If two colors are declared, the top and bottom borders will use the first color while the right and left borders will use the second color. If three colors are declared, the top border will use the first color, the right and left borders will use the second color, and the bottom border will use the third color.
div { border-color:green red blue olive; }div { border-color:green; }
div { border-color:green red; }
div { border-color:green red blue; }
border-styleDeclares the border style of all four borders at once.
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
Undeclared values work as further shorthand notation. If only one style value is declared, all four borders will use that style. If two styles are declared, the top and bottom borders will use the first style while the right and left borders will use the second style. If three styles are declared, the top border will use the first style, the right and left borders will use the second style, and the bottom border will use the third style.
div { border-style:solid dotted dashed double; }div { border-style:solid; }
div { border-style:solid dotted; }
div { border-style:solid dotted dashed; }
border-widthDeclares the width of all four borders at once.Lengths or the following predefined values:
thin
medium
thick
Undeclared values work as further shorthand notation. If only one width value is declared, all four borders will use that width. If two widths are declared, the top and bottom borders will use the first width while the right and left borders will use the second width. If three widths are declared, the top border will use the first width, the right and left borders will use the second width, and the bottom border will use the third width.
div { border-width:1px 3px 5px 2px; }div { border-width:thin; }
div { border-width:2px 4px; }
div { border-width:2px 4px 5px; }
borderUsed as a shorthand to declare the border properties when all four borders will have the same appearance.Separate values by a space in the following order (those that are not defined will use inherited or default initial values):
border-width
border-style
border-color
div { border:1px double green; }div { border:thin solid #00FF00; }

Tidak ada komentar:

Posting Komentar