Printing CSS Background Colours - Using CSS Borders

gistfile1.html

<style>
	* {
		font-family: Arial, Verdana, Georgia, 'Times New Roman';
		color: #646464;
	}
	.couponWrapper {
		width: 412px;
		height: 215px;
		border: 2px dashed #000;
		position: relative;
	}
	.couponRightBackground {
		border-right: 220px solid #efefef;
		position: absolute;
		right: 0;
		top: 49px;
		z-index: 1;
		height: 165px;
	}
	.couponHeader {
		position: absolute;
		left: 13px;
		top: 12px;
		z-index: 3;
		font-size: 20px;
		color: #000;
		font-weight: bold;
	}
	.couponHeaderBackground {
		width: 412px;
		border-top: 49px solid #aadefa;
		position:absolute;
		z-index:2;
		left: 0;
		top: 0;
	}
	.couponExpiry {
		font-size: 10px;
		position: absolute;
		width: auto;
		right: 10px;
		bottom: 7px;
		z-index: 3;
		line-height: 12px;
	}
	.couponRightColumn {
		width: 208px;
		height: 165px;
		position: absolute;
		right: 0px;
		top: 49px;
		z-index: 2;
	}
	.couponRightColumn p
	{
		font-size: 12px;
		color: #646464;
		line-height: 1.5em !important;
	}
	.couponLogo {
		position: absolute;
		left: 6px;
		top: 50px;
	}
</style>
<div class="couponWrapper">
	<div class="couponHeader">MASSIVE WIDGET SALE</div>
	<div class="couponHeaderBackground"></div>
	<div class="couponRightColumn">
		<p>All our widgets are on sale now! Get 20% off your order with this coupon.</p>
		<div class="couponExpiry">April 30/2012</div>
	</div>
	<div class="couponRightBackground"></div>
	<div class="couponLogo"><img src='http://www.egoant.com/images/EgoMPoneLogo.png'/></div>
</div>