|
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.
|