CSS Border Tutorials

CSS allows you to define the borders around (X)HTML elements. Borders appear between the margin and padding of the (X)HTML element.

Border Style

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> .none { border-style: none; } .solid { border-style: solid; } .dotted { border-style: dotted; } .dashed { border-style: dashed; } </style> <html> <body> <p class="none"> This paragraph does not have a border. </p> <p class="solid"> This paragraph has a solid border style. </p> <p class="dotted"> This paragraph has a dotted border style. </p> <p class="dashed"> This paragraph has a dashed border style. </p> </body> </html>

The code above produces the paragraphs below.

This paragraph does not have a border.

This paragraph has a solid border style.

This paragraph has a dotted border style.

This paragraph has a dashed border style.

Border Width

CSS allows you to specify the border width of an (X)HTML element with the use of the "border-width" property.

The width of the border is set in measurement units such as pixels, em, centimeters, etc.) or by one of three keywords: thin, medium or thick.

NOTE: The "border-style" property must be set first in order for the border-width property to function.

The code example below shows you how to set the border width of an (X)HTML element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> .one { border-style: solid; border-width: 5px; } .two { border-style: solid; border-width: medium; } </style> <html> <body> <p class="one"> This is a paragraph. </p> <p class="two"> This is a paragraph. </p> </body> </html>

The code above produces the paragraphs below.

This is a paragraph.

This is a paragraph.

Border Color

The "border-color" property is used to set the color of the border.

NOTE: The "border-style" property must be set first in order for the border-width property to function.

The code example below shows you how to set the color of the border.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> .one { border-style: solid; border-color: red; } .two { border-style: solid; border-width: #ff0000; } </style> <html> <body> <p class="one"> This is a paragraph. </p> <p class="two"> This is a paragraph. </p> </body> </html>

The code above produces the paragraphs below.

This is a paragraph.

This is a paragraph.

Web Hosting Resources

Free Website Templates