CSS Borders
A web browser treats every element on the page as a box. And as a box it has certain properties that you can adjust with CSS. Two of these are the margin, the space around the outside of these boxes and the padding, the space between the box and it's content. More on these two in the next section.
Thewidth
and
height
are two properties that apply to block level elements such as <p> and <div> tags, images, form fields, buttons
and the like. You can use the length and percentage values for these two that we used with fonts and text. You also have
the option of letting the browser decide by setting width and/or the height to "auto".
p{
width:400px;
height:500px;
}
width:400px;
height:500px;
}
A quick note here. The height value may be ignored if your content exceeds it.
What we're interested in here is the outline of that box known as the border.
| Property | Value | Description | N.N. | I.E. |
|---|---|---|---|---|
| border-top-color: border-right-color: border-bottom-color: border-left-color: |
Color name Hexadecimal value RGB value |
Sets the color for the border specified | 6.0 | 4.0 |
| border-top-style: border-right-style: border-bottom-style: border-left-style: |
none solid dotted dashed double groove ridge inset outset |
Set the style for the border specified | 6.0 | 4.0 |
| border-top-width: border-right-width: border-bottom-width: border-left-width: |
thin medium thick length |
Set the width for the border specified | 4.0 | 4.0 |
| border-top: border-right: border-bottom: border-left: |
width style color |
A shortcut property for setting all of the properties for the border specified in one declaration | 6.0 | 4.0 |
| border-color: | Color name Hexadecimal value RGB value |
A shortcut property for setting the color for all 4 borders | 6.0 | 4.0 |
| border-style: | none solid dotted dashed double groove ridge inset outset |
A shortcut property for setting the style for all 4 borders | 6.0 | 4.0 |
| border-width: | thin medium thick length |
A shortcut property for setting the width for all 4 borders | 4.0 | 4.0 |
| border: | width style color |
A shortcut for combining the width, style and color properties for all 4 borders into one rule | 4.0 | 4.0 |
|
||||
I've grouped many of the properties together since they are the same thing just applied to a different side of the box. Take note of the order that I've placed the sides, (top, right, bottom, left) as this becomes important when using most of the shortcuts.
