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