{ LearnWebSiteDesign.com }

HTML, XHTML CSS Tutorials and Free Website Templates

CSS Border Properties Tutorials

CSS border properties allow you to set the style, color and width of the borders of HTML elements. Borders lie between the padding and margin of HTML elements.

The image below shows you where the border is in relation to an HTML element, the margin and padding.

box model

Border Styles

The border-style property specifies the style of border to display.

The border-style values and a description of each is listed below:

Value Description
none Specifies no border
hidden The same as "none", however, "hidden" has takes the highest precedence while "none" takes the lowest precedence
dotted Specifies a dotted border
dashed Specifies a dashed border
solid Specifies a solid border
double Specifies a double border
groove Specifies a grooved border
ridge Specifies a ridged border
inset Specifies an inset border
outset Specifies an outset border
inherit Specifies that the border style should be inherited from the parent element

NOTE: If no border-style property is specified, the style of a border is none. HTML elements do not inherit the border-style of their parent elements unless specified.

The code example below shows you how to set the border style of an HTML element using the border-style property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p.none { border-style:none; } p.hidden { border-style:hidden; } p.solid { border-style:solid; } p.dotted { border-style:dotted; } p.dashed { border-style:dashed; } p.double { border-style:double; } p.groove { border-style:groove; } p.ridge { border-style:ridge; } p.inset { border-style:inset; } p.outset { border-style:outset; } p.inherit { border-style:inherit; } </style> <body> <p class="none"> This paragraph has a border style of none. </p> <p class="hidden"> This paragraph has a border style of hidden. </p> <p class="solid"> This paragraph has a border style of solid. </p> <p class="dotted"> This paragraph has a border style of dotted. </p> <p class="dashed"> This paragraph has a border style of dashed. </p> <p class="double"> This paragraph has a border style of double. </p> <p class="groove"> This paragraph has a border style of groove. </p> <p class="ridge"> This paragraph has a border style of ridge. </p> <p class="inset"> This paragraph has a border style of inset. </p> <p class="outset"> This paragraph has a border style of outset. </p> <p class="inherit"> This paragraph has a border style of inherit. </p> </body> </html>

The web page that the code example creates is here: CSS border Properties Example.

Border Width

The border-width property is used to set the width of the border.

NOTE: When specifying the border-width property, you must also specify the border-style property in order for the border-width property to be able to displayed in web browsers.

The possible border-width values are listed below:

Property Values
border-width length values, thin, medium, thick

NOTE: When specifying the border-width property with the value of either thin, medium or thick, different web browsers may display the width of each value differently. The only guarantee is that the value of thin will have the least width and the value of thick will have the most width of the 3 values.

The code example below shows you how to set the border width of an HTML element using the border-width property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p.one { border-style:solid; border-width:1px; } p.five { border-style:solid; border-width:5px; } p.ten { border-style:solid; border-width:10px; } p.thin { border-style:solid; border-width:thin; } p.medium { border-style:solid; border-width:medium; } p.thick { border-style:solid; border-width:thick; } </style> <body> <p class="one"> This paragraph has a border style of solid and a border width of 1 pixel. </p> <p class="five"> This paragraph has a border style of solid and a border width of 5 pixels. </p> <p class="ten"> This paragraph has a border style of solid and a border width of 10 pixels. </p> <p class="thin"> This paragraph has a border style of solid and a border width of thin. </p> <p class="medium"> This paragraph has a border style of solid and a border width of medium. </p> <p class="thick"> This paragraph has a border style of solid and a border width of thick. </p> </body> </html>

The web page that the code example creates is here: CSS border Properties Example.

Border Color

The border-color property specifies the color of the border.

The values that the background-color property can have are listed below:

color name A color name, for example, red or blue
hex code A hex value, for example, #000000 or #ff0000
RGB code An RGB value, for example, rgb(255,0,0)
transparent The parent's background color will shine through

NOTE: When specifying the border-color property, you must also specify the border-style property in order for the border-color property to be able to displayed in web browsers.

The code example below shows you how to set the border color with the use of the border-color property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p.border_color { border-style:solid; border-color:yellow; } </style> <body> <p> This is a paragraph. </p> <p class="border_color"> This paragraph has a border color. </p> </body> </html>

The web page that the code example creates is here: CSS border Properties Example.

Style Individual Sides

CSS allows you to set the border style of each individual side with the use of a property for each individual side of an HTML element.

The properties listed below allow you to style the border of the individual sides of an HTML element.

Property Description
border-top-style Specifies the style of the top border.
border-right-style Specifies the style of right border.
border-bottom-style Specifies the style of the bottom border.
border-left-style Specifies the style of the left border.

The code example below shows you how to individually style the individual sides of an HTML element

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p.borders { border-top-style:dashed; border-right-style:dotted; border-bottom-style:solid; border-left-style:double; } </style> <body> <p> This is a paragraph. </p> <p class="borders"> This paragraph has the border on each side styled individually. </p> </body> </html>

The web page that the code example creates is here: CSS border Properties Example.

Shorthand Border Style Property

CSS allows you to style the border of an HTML element in one declaration using the border-style property. The border-style property can have 1 to 4 values.

Shorthand Border Style Property with 4 Values

The shorthand border-style property below has 4 values. The first value (dotted) is the top border style, the second value (solid) is the right border style, the third value (double) is bottom border style and the last value (dashed) is the right border style.

border-style:dotted solid double dashed;

Shorthand Border Style Property with 3 Values

The shorthand border-style property below has 3 values. The first value (dotted) is the top border style, the second value (solid) is the right and left border style and the last value (dashed) is the bottom border style.

border-style:dotted solid dashed;

Shorthand Border Style Property with 2 Values

The shorthand border-style property below has 2 values. The first value (solid) is the top and bottom border style and the second value (double) is the right and left border style.

border-style:solid double;

Shorthand Border Style Property with 1 Value

The shorthand border-style property below has 1 value. The value (solid) is the top, right, bottom and left side border style.

border-style:solid;

Shorthand Border Property

CSS allows you to set all of the border properties for all 4 sides in one declaration using the border property.

The border property below has a border width of 5 pixels, a border style of solid and border color of blue.

border:5px solid blue;

NOTE: When using the border property, the values should be in the following order:

  • border-width
  • border-style
  • border-color

NOTE: The border-style value is the only required value in the border property. The border-width value and/or the border-color values are not required.

Tutorials

Templates

References

Sponsors

You can get your website online using Velnet, a leading UK web hosting provider. They provide free template and installation for WordPress blogs. Discuss webmaster related topics at Webmaster Serve, a Webmaster SEO forum

SouthernWebGroup.com provides high quality website design in Atlanta, GA as well as around the world.

Find low cost cheap website hosting and domain registration.

Browser our free no ads web hosting directory and find the free web hosting that's right for you and your budget.

Advertise your web design and web development related products and services here.

Recommended

Download free css web hosting templates that are easy to edit at FreeWebHostingTemplates.com.

Friends