How to style borders?

Often while editing you template you must have come across something like border: 1px solid #333333. What this means is "make a border 1 pixel wide, with solid line, and color of line is #333333. In this tutorial we will tell what styles you can apply to the borders and how to increase the line width. Finally we will also tell about outlines.









Increase the border width
To increase the border width just increment the pixel value. For e.g. to make a border 2 pixel wide

border: 2px solid #333333;

The higher the pixel value the wider the border. border: 5px solid #333333 will have five times wider border than border: 1px solid #333333.

Change the border style
Following are the styles available for border.

1. border:3px solid #b90000;
2. border:3px double #b90000;
3. border:3px inset #b90000;
4. border:3px dotted #b90000;
5. border:3px groove #b90000;
6. border:3px outset #b90000;
7. border:3px dashed #b90000;
8. border:3px ridge #b90000;

Outlines
In addition to borders you can also have outlines. Here is an e.g. of outline.

outline:#b90000 dotted 3px;

Confused, do they look same. Here is another e.g. to show the difference.

border:3px solid #333; outline:#b90000 dotted 3px;

The inner gray line designates border, while the outer red line is the outline.