• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2296
  • Last Modified:

CSS Border Image Gradient

I have a CSS design problem.

I have a main content box and want to add gradient image baground as border color. Anyone that has a good guide, option, code or something to explain/show how to make that.

So instead of typical border colors using images, have gradient images (PGN)

------------
|             |
|             |
-----------

CSS Box
MainContainer




#MainContainer{
	width: 1000px;
	height: 615px;
	margin-left: auto;
    margin-right: auto;
	margin-top: -8px;

}

Open in new window

0
chugarah
Asked:
chugarah
  • 2
1 Solution
 
numberkruncherCommented:
The following gives you a gradient border and also allows you to specify the thickness.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Demo Page</title>
		<style type="text/css">
			#MainContainer {
				height: 615px;
				background: white;
				margin-left: auto;
				margin-right: auto;
			}
			.gradient-border {
				width: 1000px;
				margin-left: auto;
				margin-right: auto;
				/* Border background: */
				background: #003562 url(grad.png) repeat-x top left;
				/* Border thickness: */
				padding: 3px;
			}
		</style>
	</head>
	<body>
		<div class="gradient-border">
			<div id="MainContainer">test
			</div>
		</div>
	</body>
</html>

Open in new window

grad.png
0
 
chugarahAuthor Commented:
:)), hehe wow, fast answer, and exactly what I was searching for. Many thanks numberkruncher.
0
 
numberkruncherCommented:
No problem ;)
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now