CSS Beginner tutorial 6 : CSS Borders

Borders can be applied to most HTML elements within the body. To make a border around an element, all you need is border-style. The values of border can be solid, dotted, dashed, double, groove, ridge, inset and outset. For example,

border-style: solid;

You can set the width of border by using border-width property, which is usually in pixels. For example

border-width: 3px;

The four sides of border can be set individually by using these properties, border-top-width, border-right-width, border-bottom-width and border-left-width. e.g

border-top-width : 10px;
border-right-width : 5px;
border-bottom-width : 10px;
border-left-width : 5px;

The color of border can be set by "border-color" property. For example

border-color: red;

After applying all properties to h2 tag, It 'll look like as follow.

h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}

It will show h2 tag, in browser as follows.

border

See Also