Adding Borders Tutorial
You can add borders around your text or images using the following code:
border: 1px solid #000000;
The above code adds a solid black border with the width of 1 pixels. You can change #000000 to another color code, 1 to another number and solid to dotted or dashed. Below are some more border codes:
border: 1px solid #000000; |
Adds a solid border to the entire element. |
border-right: 1px solid #000000; |
Adds a solid border to the right of the element only. |
border-left: 1px solid #000000; |
Adds a solid border to the left of the element only. |
border-top: 1px solid #000000; |
Adds a solid border to the top of the element only. |
border-bottom: 1px solid #000000; |
Adds a solid border to the bottom of the element only. |
border: 1px dashed #000000; |
Adds a solid border to the entire element. |
border-right: 1px dashed #000000; |
Adds a dashed border to the right of the element only. |
border-left: 1px dashed #000000; |
Adds a dashed border to the left of the element only. |
border-top: 1px dashed #000000; |
Adds a dashed border to the top of the element only. |
border-bottom: 1px dashed #000000; |
Adds a dashed border to the bottom of the element only. |
border: 1px dotted #000000; |
Adds a solid border to the entire element. |
border-right: 1px dotted #000000; |
Adds a dotted border to the right of the element only. |
border-left: 1px dotted #000000; |
Adds a dotted border to the left of the element only. |
border-top: 1px dotted #000000; |
Adds a dotted border to the top of the element only. |
border-bottom: 1px dotted #000000; |
Adds a dotted border to the bottom of the element only. |
You may use more than one border property at a time. For example:
border-right: 1px #000000 solid;
border-left: 1px #000000 dotted;
border-bottom: 1px #000000 dashed;
border-left: 1px #000000 dotted;
border-bottom: 1px #000000 dashed;