Borders with CSS

In boxes.html add a div element inside the body (just under the h1 heading).  Save and view and you will not see anything because a div is just an invisible box. Add a paragraph inside the div.  Put a few words into it.

Open _template.css in your editor and save it as boxes.css.  Amend the link element in boxes.html to point to boxes.css.  Add a div rule set:

div {

Save both files and view the Web page in a browser.  You can now see that, by default, div elements fit the available page width but have a height to fit their content (for now).

A simple div element with a border


Change the border-width to 20px, border-color to rgb(150,0,0) and border-style to groove.  Save and view.

The border-style can also be set to any of these: dotted, dashed, solid, double, ridge, inset, outset.  Feel free to try them.

Now add one final property to the div rule:


Save and view and the corners should be rounded.  The radius is the radius of the imaginary circle of which the corner is a quarter.  Try changing it.  Leave it looking reasonable before you move on.


You can also set individual border styles with border-bottom-width:10px; and similar.