css3 way to create design dashed box

3.4k Views Asked by eyal halperin At 18 April 2025 at 15:41

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

Original Q&A

There are 4 best solutions below

mahega On 30 October 2013 at 12:01 BEST ANSWER

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/

ProgramFOX On 30 October 2013 at 11:43

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

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

Paulie_D On 30 October 2013 at 11:43

border:1px dashed grey;

JSFiddle

AudioBubble On 30 October 2013 at 11:50

 Try this:

    css:

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


        HTML:

        <div style="border:dotted"" id="xx"></div>

css3 way to create design dashed box

There are 4 best solutions below

Related Questions in CSS

Related Questions in DOTTED-LINE

Trending Questions

Popular # Hahtags

Popular Questions