Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

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.

Set a Different Color for a Single Border

<p style="border:2px solid black; border-bottom-color:blue;">
Set the bottom border to blue</p>

Set the bottom border to blue

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

Set the Width, Style, and Color for a Single Border

<p style="border-bottom: 2px dashed blue;">
set width, style, and color for bottom border</p>

set width, style, and color for bottom border

You can set the width, Style, and color for a single border all in one property. Here I set used the border-bottom property to set the width, Style, and color for the bottom border. You can similarly use the border-top, border-left and border-right properties to set the properties of each border individually.

You can also use the above properties to set several or all of the border styles, widths, or colors separately. You have probably realized that there are hundreds of options for setting border properties.

More CSS Quick Reference:
• Set an Element's Clipping
• Highlight Text
• Descendant Selector
• Set a Fixed Background Image
• Set the Font Properties
• Class Selector
• Set the Text Color
• Indent the First Line of Text
• nth-child Selector
• Set the Border Properties