css3 way to create design dashed box [closed]

StackOverflow https://stackoverflow.com/questions/19681222

  •  01-07-2022
  •  | 
  •  

Question

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

Was it helpful?

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/

OTHER TIPS

border:1px dashed grey;

JSFiddle

.box {
    width: 400px;
    height: 200px;
    border: dashed 1px gray;  
}

JSFiddle: http://jsfiddle.net/8Gxys/

 Try this:

    css:

        #xx {
            width: 400px;
            height: 200px; 
        }


        HTML:

        <div style="border:dotted"" id="xx"></div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top