How to style dashed borer with inset look in css?

I have tried a lot but not finding the way to style dashed border with detail / inset look, I have seen in some sites they have the same border with depth like inset and they don’t use png image they do it by only using html and css. I have attached an image about what I want, I have made this in photoshop now I want to convert the dashed line in css just like it’s on the image with depth feel.
Click to see larger:

Have you tried giving border-style inset and outline-style dashed?
Using outline may mean you will need to tweak your dimension styles a bit (applied outside of the element) and you’ll need to have a DOCTYPE for IE but I think it’s what you’re looking for.

Hi,

As Mittineague mentioned above you could do something like this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { background:#ccc }
.test {
	width:300px;
	height:300px;
	border:1px dashed red;
	position:relative;
	padding:10px 0 5px;
	text-align:center;
	outline:1px dashed yellow;
	outline:1px dashed rgba(255,255,0, 0.4);
	outline-offset:0px;
}
</style>
</head>

<body>
<div class="test">Testing Testing</div>
</body>
</html>

Or for a single border perhaps something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { background:#ccc }
.test {
	width:300px;
	border-bottom:1px dashed red;
	position:relative;
	padding:10px 0 5px;
	text-align:center;
}
.test:after {
	content:" ";
	border-bottom:1px dashed lightyellow;
	position:absolute;
	bottom:-2px;
	right:0;
	left:0;
	opacity:0.5;
}
</style>
</head>

<body>
<div class="test">Testing Testing</div>
</body>
</html>

IE8 and under won’t show the transparency on the second border although in the second example you could use filter opacity. ( filter:Alpha(Opacity=50):wink: but probably easier just to use a lighter border color instead.