• View Demo
• Download Files

Step 1

Firstly, the markup. To make the box scalable in all directions, I’d have to use a div for each side of the box. These divs would be nested in a wrapper which determined the width. After the markup, we’re going to use CSS to add a background and position to each div in order to create a seamless border.

<div class="border-box">
	<div class="top-left">
		<div class="top-right">
			<h1>Lorem ipsum</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
	</div>
	<div class="bottom-left">
		<div class="bottom-right"></div>
	</div>
</div>

Step 2

Next we need to add the CSS to position the nested divs correctly to allow the border to appear. As you’ll notice that the same large image being used for each div. It is being positioned according to what part of the background is visible. Padding is used to allow space around the content.

.border-box {width: 960px;}
	.border-box .top-left, .border-box .top-right, .border-box .bottom-left, .border-box .bottom-right  {
		background-image: url(../img/bg-box.gif);
		background-repeat: no-repeat;
	}
	.border-box .top-left {
		background-position: left top;
	}
	.border-box .top-right {
		background-position: right top;
		margin-left: 10px;
		padding: 20px 20px 10px 10px;
	}
	.border-box .bottom-left {
		background-position: left bottom;
	}
	.border-box .bottom-right {
		background-position: right bottom;
		height: 10px;
		margin-left: 10px;
	}

This is another variation using a different image border.

Additional Resources

Here is a similar approach from an article on Web Designer Wall. Their sample uses negative margins in addition to padding instead, but still works flawlessly. I’ve also grouped the box selectors so that you can change the background image all in one place.

The guys over at From The Couch have a good video tutorial for rounded corners. Their tutorial also allows a box to be flexible and scalable.

Whichever one of these methods you use it should get you the results that you are looking for.

Design Moves Me is the result of their advice. I poked around and took a look at what was popular and what kind of designs were getting traction and attention from these galleries. The approach I took was an artsy brush stroke organic feel with attractive bright colors. I’m still refining the design and making the blog functionality easier to use as it grows.  I’d just like to thank everyone for the saves and recognition this site receives. I promise more substantial design related articles are coming soon!

Newest design gallery additions are below.

CSSFury

CSSBake

CSSHeaven

CSS Creme