CSS Border

border-style

The border-style property defines the format of the border. The table below shows the possible values and how each one renders.

CSS Declaration	Output
p {border-style:solid;}	Solid Border
p {border-style:dashed;}	Dashed Border
p {border-style:double;}	Double Border
p {border-style:dotted;}	Dotted Border
p {border-style:groove;}	Groove Border
p {border-style:ridge;}	Ridge Border
p {border-style:inset;}	Inset Border
p {border-style:outset;}	Outset Border

border-width

The border-width property specifies the width of the border. The value can be "thin", "medium", "thick", or a numerical width.

CSS Declaration	Output
p {border-width:9px; border-style:solid;}	Border Width 9px
p {border-width:medium; border-style:dashed;}	Border Width Medium

border-color

The border-color property specifies the color of the border.

Examples below:

CSS Declaration	Output
p {border-color:#0000FF; border-style:solid;}	Border Color Blue
p {border-color:red; border-style:dotted;}	Border Color Red

border-top-, border-left-, border-bottom-, border-right-

Directions (top, left, bottom, right) can be combined with style, width, and color to form a 3-part CSS command. For example, border-top-style specifies the style of the top border. Some examples below:

CSS Declaration	Output
p {border-top-style:solid; border-bottom-style:dotted;}	Sample 1
p {border-top-style:solid; border-top-width:medium;}	Sample 2
p {border-left-style:solid; border-bottom-style:dashed; border-bottom-color:#00FF00;}	Sample 3

border

If the characteristics for all 4 sides of the border are the same, they can be combined into a single line using the border property. In addition, all three border properties (border-style, border-width, and border-color) can be combined into a single line with the border command.

For example, with the CSS declaration,

p {   border:#0000FF 5px solid; }

The following HTML,

<p>A single line declares all border properties.</p>

yields the output below:

A single line declares all border properties.