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>
Output

View original