rmlumley.com

Over 18 months ago, when I first got my web production job, I was asked to create some rounded corners using CSS. It took awhile, and a little help, but I finally nailed it. Of course, the design was changed during production and the rounded corners were never used. Still, I kept the CSS I used for future reference and it has come in handy. So, here it is, all CSS and no JavaScript. It will also resize as you adjust your window.

First, these are the four images I used. The images are huge, (1848×1816), so it should be able to adjust to any screen resolution. Still, these are GIFs that are only 12 KB a piece.

Here is the HTML. It’s relatively simple, just nesting divs inside each other that we will onionskin with the CSS.

<div class="upperleft">
	<div class="upperright">
		<div class="lowerleft">
			<div class="lowerright">
			<div class="textarea">
				<p>Insert Content Here.</p>
 			</div>
 			</div>
		</div>
	</div>
</div>

And the CSS. I just use the 4 different background images and position each accordingly, and adjust the Margin & Padding so it all lines up.

/* CSS Document */
.upperleft {
	min-width:400px;
	background-image:url(top_left.gif);
	background-position: top left;
	background-repeat: no-repeat;
	margin-right: 15px;
	}

.upperright {
	background-image:url(top_right.gif);
	background-position: top right;
	background-repeat: no-repeat;
	margin-right: -15px;
	margin-left: 15px;
	}

.lowerleft {
	position: relative;
	top:15px;
	background-image:url(bottom_left.gif);
	background-position: bottom left;
	background-repeat: no-repeat;
	margin-right: 15px;
	margin-left: -15px;
	}

.lowerright {
	background-image:url(bottom_right.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
	margin-right: -15px;
	margin-left: 15px;
	padding-left:5px;
	padding-right:15px;
	padding-bottom: -20px;
	}

.textarea {
	position: relative;
	top:-10px;
}

Posted in CSS | 1 Comment »

This entry was posted on Thursday, May 7th, 2009 at 6:00 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.