Question

I’m trying to make the borders of a div look like this, with transparency, drop shadow, and inner dashed border. Is there a way to do this with CSS/jQuery, or am I better off just using images?

Answer 1

Try HTML

<div id="rounded">    
    ​<div id="yellow">
        <div id="dashed"></div>
    </div>
</div>​​​​​​​​​​​​​​​

and CSS

#rounded {
    background-color: gray;
    width: 400px;
    height: 400px;
    padding: 10px;
}
#yellow {
    background-color: #F7EFE2;
    height: 96%;
    padding: 10px;
}
#dashed {
    width: 100%;
    border: 1px dashed #E8C55F;
    height: 100%;
}

See a live example here
​