Css Tutorial : border-style

The border-style property is used to give any element a border. The browser must first understand
the style of border to be drawn before moving on to further border declarations. In other
words, the style keyword is declared before the color of the border, for instance.
The property applies a defined style to one, several, or all borders. Keywords for border-style
are none, dotted, dashed, solid, double, groove, ridge, inset, and outset.

**■Note: Some elements have default borders. The fieldset element (used to define a series of related
form inputs) has a medium-thickness border by default. Also watch out for images used for hyperlinks, where
the image will have a border matching the declared link text color for the containing element. The borders for
both can be styled or removed using border-style. In the case of all other elements, you define your border
styles from scratch.

The following CSS styles a container with a medium-thickness dashed border all around
the division:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-style: dashed;
}

Taking this further, a unique style for each side can be defined using shorthand for the
border-style property; as with margin and padding, the values are ordered top, right, bottom,
and left:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-style: dashed dotted solid ridge;
}