Borders
Thick, thin, this color, that color, solid, dotted, dashed…
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Borders</title>
<style>
body {
font-size: 80%;
color: #000; /* Note that borders that do not have an explicit color will take on this color declaration */
margin: 0;
padding: 0;
}
p {
padding: 4em;
margin: 2em;
}
code {
font: 1em/1.5 Courier;
}
#border1 {
border: 1px solid;
}
#border2 {
border: 1px dotted;
}
#border3 {
border: 2px dashed #ccc;
}
#border4 {
border: solid;
border-width: 1px 5px 10px 15px;
}
#border5 {
border: 5px;
border-style: solid dotted dashed solid;
}
#border6 {
border: 5px solid;
border-color: black #444 #888 #ccc;
}
#borderCollie {
border: 3px dotted #06c;
}
</style>
</head>
<body>
<p id="border1"><code>border: 1px solid;</code></p>
<p id="border2"><code>border: 1px dotted;</code></p>
<p id="border3"><code>border: 2px dashed #ccc;</code></p>
<p id="border4"><code>border: solid;<br>
border-width: 1px 5px 10px 15px;</code></p>
<p id="border5"><code>border: 5px;<br>
border-style: solid dotted dashed solid;</code></p>
<p id="border6"><code>border: 5px solid;<br>
border-color: black #444 #888 #ccc;</code></p>
<!-- Link back to HTML Dog: -->
<p id="borderCollie"><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
</body>
</html>