<?xml version="1.0"?>
<doc>
	<title>Perforated Border</title>
	<body>
		<p>This is an example of how to make a perforated border round a block of text or an image</p>
		<div class="perfouter" style="width: 30%;">
			<div class="perfinner">
				<div class="perfcontent" style="background: #aab5dd;">
					<p>This is a pretty perforated bordered piece of text.</p>
					<p>I hope you enjoy it!</p>
				</div>
			</div>
		</div>
		<div class="perfouter" style="width: 120px;">
			<div class="perfinner">
				<div class="perfcontent" style="background: #aab5dd; text-align: center;">
					<img src="ikkleart.jpg" title="tiny ikkle piccy" alt="tiny ikkle piccy" />
				</div>
			</div>
		</div>
		<p>This is done using the following code:</p>
		<pre>
&lt;div class="perfouter" style="width: 30%;"&gt;
	&lt;div class="perfinner"&gt;
		&lt;div class="perfcontent" style="background: #aab5dd;"&gt;
			&lt;p&gt;This is a pretty perforated bordered piece of text.&lt;/p&gt;
			&lt;p&gt;I hope you enjoy it!&lt;/p&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
		</pre>
		<p>Using the styles defined below:</p>
		<pre>
.perfouter {
	width: 50%;
	padding-left: 5px;
	margin-top: 0px;
	padding-top: 5px;
	padding-bottom: 0px;
	padding-right: 0px;
	background: url("blueperfs.png");
}

.perfinner {
	padding-left: 0px;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 5px;
	background: url("blueperfs.png") 100% 100%;
}

.perfcontent {
	background: #5f6dce;
	color: black;
	padding: 5px;
	margin: 0px;
}

.perfcontent p {
	margin: 0px;
	padding: 0.25em;
}
		</pre>
		<p>Word of Warning: This does *NOT* work if you are using transparent images for the backgrounds as they then overlap and it becomes a horrible mess (trust me, it had me confused for a while!).</p>
	</body>
</doc>
