Skip to navigation


The “borders” that border borders.


<!DOCTYPE html>
	<meta charset="utf-8">
		* {
			margin: 0;
		body {
			margin: 20px;
			padding: 20px;
		h1 {
			font-size: 80px;
		pre {
			padding: 20px;
			border: 20px dotted;
			outline: 20px solid red;
			margin: 40px 0;
		p {
			font-size: 40px;
			outline-color: #999;
			outline-style: dashed;
			outline-width: thin;
			margin: 40px 0;
		p strong {
			outline: 20px double rgba(0,255,0,.2);
		#borderCollie {
			outline: 0;
		#borderCollie a {
			outline: medium solid rgba(0,0,255,.1);
			transition: outline 1s;
		#borderCollie a:hover {
			outline: 400px solid rgba(0,0,255,.9);

	<pre><code>padding: 20px;
border: 20px dotted;
outline: 20px solid red;</code></pre>

	<p>The width, style, and color of the outline around a box. An outline is rendered around the outside of the border of a box. <strong>It does not affect the size or position of the box, or any other box.</strong></p>

	<!-- Link back to HTML Dog: -->
	<p id="borderCollie"><a href=""><img src="" alt="HTML Dog"></a></p>


View original