Search code examples
cssdotted-line

css3 way to create design dashed box

I have this design for a dashed box:

enter image description here

what is the best way to create this with css3?

I have tried to use the 'border:dashed' - but it's not looking like the design I need.

I'm wondering if there is a way to do this with only css without using background image

Solution

  • Try to realize it with two DIV boxes

    <!DOCTYPE html>
<html>
<head>
<style>

#outside {
width:400px;
height:150px;
border-style:dashed; border-width:3px;
position: relative; 
}
#inside {
background-color: white;
width:404px;
height:154px;
position: absolute;
top:-2px;
left:-2px;
}
</style>
</head>

<body>
<div id="outside">
<div id="inside">
</div>
</div>
</body>

</html>

    http://jsfiddle.net/RH5R3/