CSS: Borders

The CSS border property defines a visible border, a box model, around HTML elements:

HTML file:	Displayed by browser:
<!DOCTYPE html> <html> <head> <style> h1 { border:2px solid blue; } p { border:1px solid grey; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>	This is a heading. This is one paragraph. This is a second paragraph. This is a third paragraph. This is another heading.

HTML file:

Displayed by browser:

<!DOCTYPE html>
  <html>
    <head>
      <style>
h1 { border:2px solid blue; }
p { border:1px solid grey; }
      </style>
    </head>
    <body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
    </body>
  </html>

This is a heading.

This is one paragraph.

This is a second paragraph.

This is a third paragraph.

This is another heading.

Every HTML element has a box around it, even if you cannot see it (default). The border property can make this box visible.