Welcome to Bucaro TecHelp!

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

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Set the Border Style

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:
• How to Define and Apply a Style Class
• Set the Background Properties
• Set the Border Color
• Set a Background Image's Position
• Set an Element's Overflow
• Set List Bullets Position
• Use Image for List Item Bullets
• Descendant Selector
• Set the Type of Bullet Used in List
• Set the Border Width

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268