Home

Ticks and Trips

Fancy Borders

Fancy borders like the ones you see around the content here can be created by using <div> tags in combination with background images for each section of the border.

Eight images are required. An image is required for each corner and for each side.

I wanted the borders to appear identical, sans animation, to the Flash navigation menu. So I captured an image of the menu and brought it into Photoshop. There I cropped the excess so the border was right at the edge of the image. Then I cut out each corner for the corner pieces and made them into PNG images. I then cut a one pixel high slice of the sides and a one pixel wide slice of the top and bottop for the left, right, top, and bottom images.

Corners				Edges
Top Left	Top Right	Bottom Left	Bottom Right	Top	Right	Bottom	Left

I surrounded the box with div tags as in this example:

example use

	<div class="boxouter">
	<div class="boxtop"><div class="boxbottom"><div class="boxleft"><div class="boxright">
	<div class="boxtlc"><div class="boxtrc"><div class="boxblc"><div class="boxbrc">
	<div class="boxinner">

			Body Content

	</div>
	</div></div></div></div></div></div></div></div>
	</div>

On the context style sheet page:

/* Used to draw fancy box around content */
.boxtop				{background: url('images/bbox/top.png') top repeat-x}
.boxbottom			{background: url('images/bbox/bottom.png') bottom repeat-x}
.boxleft			{background: url('images/bbox/left.png') left repeat-y}
.boxright			{background: url('images/bbox/right.png') right repeat-y}
.boxtlc				{background: url('images/bbox/tlc.png') top left no-repeat}
.boxtrc				{background: url('images/bbox/trc.png') top right no-repeat}
.boxblc				{background: url('images/bbox/blc.png') bottom left no-repeat}
.boxbrc				{background: url('images/bbox/brc.png') bottom right no-repeat}
.boxinner			{padding: 20px}
.boxouter			{background-color: #f7f7ff; color: #000088}
.barinner			{padding: 6px}