SommitRealWeird

Blue Perforated Borders

This is an example of how to make a perforated border round a block of text or an image

This is a pretty perforated bordered piece of text.

I hope you enjoy it!

tiny ikkle piccy

This is done using the following code:

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

Using the styles defined below:

.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;
}

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!).