Set the Border Style

By Stephen Bucaro

Set the border style using the border-style property. Border style values may be none, solid, dashed, dotted, double, groove, ridge, inset, or outset.

<p style="border-style:solid;">
Set a solid border style</p>

border-style:none

border-style:solid

border-style:dashed

border-style:dotted

border-style:double

border-style:groove

border-style:ridge

border-style:inset

border-style:outset

Set a Different Style for a Single Border

<p style="border-style:dashed; border-bottom-style:solid;">
A different style for a single border</p>

A different style for a single border

You can set a different style for a single border. Here I set the border style to dashed. Then I used the border-bottom-style property to set the bottom border's style to solid. You can also use the border-top-style, border-left-style, or border-right-style properties to set the style of each borders individually.

Set a Different Style for Each Border

<p style="border-style: solid dotted double ridge;">
A different border style for each border</p>

A different style for each border

The method shown above sets a different style each border in one property. The order of the values is top, right, bottom, left.

Set a Different Width for a Single Border

<p style="border: 1px solid black; border-bottom-width:4px;">
Set a different width for a single border</p>

Set a different width for a single border

You can set a different width for a single border. Here I set the border to 2 pixels wide, solid black. Then I used the border-bottom-width property to set the bottom border's width to 4 pixels. You can also use the border-top-width, border-left-width, or border-right-width properties to set the width of each borders individually.