Borders - HTML Tutorial
The CSS box model is the foundation for how all visual HTML elements are rendered. As shown in Figure 3.1, any HTML element, such as:
<p>The quick brown fox jumped over the lazy dog.</p>is composed of four main areas:
Figure 3.1. The Box Model
The content sits at the center, surrounded by padding, then border, and finally margin. CSS allows you to style each of these independently.
Understanding Borders
Borders are often the easiest part of the box model to grasp, because they are visible. Most elements don’t have borders by default, but you can add them with these CSS properties:
border-width: Specifies thickness (e.g.,3pxor0.2em).border-color: Defines the color (e.g.,greenor#ff0000). Default is usually black.border-style: Determines how the border is drawn. Common values includesolid,dashed,dotted,double,groove,ridge,inset,outset, andnone. Unsupported styles usually default tosolid.
You can apply borders to any visible element, such as div or p. For example:
<head>
<style>
.thickline { border-width: 10px; border-style: solid; }
.thinblueline { border-width: 1px; border-color: #0000ff; border-style: solid; }
.greenridge { border-width: 5px; border-color: green; border-style: ridge; }
.empurpledash { border-width: 0.5em; border-color: #800080; border-style: dashed; }
</style>
</head>
<body>
<p class="thickline">1st example text.</p>
<p class="thinblueline">2nd example text.</p>
<p class="greenridge">3rd example text.</p>
<p class="empurpledash">4th example text.</p>
</body>The first three borders use pixels; the last uses em, so it scales with font size.
Applying Different Borders to Each Side
To style each side independently, split the border properties:
border-width→border-top-width,border-right-width,border-bottom-width,border-left-widthborder-color→border-top-color,border-right-color,border-bottom-color,border-left-colorborder-style→border-top-style,border-right-style,border-bottom-style,border-left-style
Example:
<head>
<style>
p.fourborders {
border-top: dashed 5px #ff0000;
border-bottom: groove 10px #336600;
border-right: solid 20px #000080;
border-left: solid 10px #CC9900;
}
</style>
</head>
<body>
<p class="fourborders">Example text with four different borders.</p>
</body>Border Shorthand Notation
You can also use the border shorthand to set width, style, and color in one line. For example:
<style>
.thickline { border: 10px solid; }
.thinblueline { border: 1px solid #0000ff; }
.greenridge { border: ridge 5px green; }
.empurpledash { border: 0.5em dashed #800080; }
</style>The shorthand sets all four sides to the same border. To style a single side, use border-top, border-right, border-bottom, or border-left:
.greenridge {
border-left: ridge 5px green;
}