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 the Font Style • Set an Element's Padding • Set the Font Variant • Set the Font Size • How to Define and Apply a Style Class • Set the Letter Spacing • Use an External Style Sheet • Set the Border Color • Set the Text Color • Set the Word Spacing
|