| Property | Description | Possible Values | Examples |
|---|---|---|---|
| border-top-color | Declares the color of the top border. | Valid color names, RGB values, hexidecimal notation, or the predefined value transparent. | div { border-top-color:green; } div { border-top-color:#00FF00; } |
| border-top-style | Declares 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-width | Declares the width of the top border. | Lengths or the following predefined values: thin | div { border-top-width:2px; } div { border-top-width:thin; } |
| border-top | Used 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 | div { border-top:2px solid green; } div { border-top:thick double #00FF00; } |
| border-right-color | Declares the color of the right border. | Valid color names, RGB values, hexidecimal notation, or the predefined value transparent. | div { border-right-color:green; } div { border-right-color:#00FF00; } |
| border-right-style | Declares 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-width | Declares the width of the right border. | Lengths or the following predefined values: thin | div { border-right-width:2px; } div { border-right-width:thin; } |
| border-right | Used 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 | div { border-right:2px solid green; } div { border-right:thick double #00FF00; } |
| border-bottom-color | Declares the color of the bottom border. | Valid color names, RGB values, hexidecimal notation, or the predefined value transparent. | div { border-bottom-color:green; } div { border-bottom-color:#00FF00; } |
| border-bottom-style | Declares 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-width | Declares the width of the bottom border. | Lengths or the following predefined values: thin | div { border-bottom-width:2px; } div { border-bottom-width:thin; } |
| border-bottom | Used 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 | div { border-bottom:2px solid green; } div { border-bottom:thick double #00FF00; } |
| border-left-color | Declares the color of the left border. | Valid color names, RGB values, hexidecimal notation, or the predefined value transparent. | div { border-left-color:green; } div { border-left-color:#00FF00; } |
| border-left-style | Declares 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-width | Declares the width of the left border. | Lengths or the following predefined values: thin | div { border-left-width:2px; } div { border-left-width:thin; } |
| border-left | Used 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 | div { border-left:2px solid green; } div { border-left:thick double #00FF00; } |
| border-color | Declares the border color of all four borders at once. | Valid color names, RGB values, hexidecimal notation, or the predefined value transparent. Separate the color for each border by a space, declaring the colors for the borders in the following order: border-top-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-style | Declares 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-width | Declares the width of all four borders at once. | Lengths or the following predefined values: thin 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; } |
| border | Used 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 | div { border:1px double green; } div { border:thin solid #00FF00; } |