Layout. How to implement border inside the unit, not on its border? An example in the description

Want to get rid of background-image, make the gradient using box-shadow in css, but how to make a dotted line?
image

Need to get one tag, then to this feed jqueryui.com/demos/button/
Any ideas?
October 14th 19 at 12:32
4 answers
October 14th 19 at 12:34
Solution

the <div></div>



body{background:#000}
div{
width:100px;
height:30px;
background:#F00;
border:#FF0 dashed 1px;
border-radius:5px;
Box-shadow:0px 1px 0px #f00,0px -1px 0px #f00,1px 0px 0px #f00,-1px 0px 0px #f00;
}


So to get the desired effect, note, the shadow should look in all 4 sides that would not spoil the figure.
wow, it looks like this is it...
Thank you! - bradford.Spink commented on October 14th 19 at 12:37
A bit finished...
 min-width: 100px;
 background: #aa0808;
 border: #fff dashed 1px;
 border-radius: 5px;
 box-shadow: inset #e20b0b -26px 1px 26px -13px, 0px 1px 0px #aa0808, 0px -1px 0px #e20b0b, 1px 0px 0px #aa0808, -1px 0px 0px #aa0808;
 text-align: center;
 color: #fff;
 text-shadow: #393939 1px 1px 0px;
 padding: 4px 10px 5px 12px;

Here's what happened :)
- bradford.Spink commented on October 14th 19 at 12:40
October 14th 19 at 12:36
outline:1px dashed red;
outline-offset:-4px;
October 14th 19 at 12:38
Complement CaptainQuazar. 4 the shade is not needed, one is enough.


the <div></div>
<style>
body{background:#000}
div{
width:100px;
height:30px;
background:#F00;
border:#FF0 dashed 1px;
border-radius:5px;
Box-shadow:0px 0px 0px 2px #f00;
}
</style>
Thank you, I forgot about the fourth figure. - bradford.Spink commented on October 14th 19 at 12:41
October 14th 19 at 12:40
outline: 1px solid #color;
oops.
dashed, not solid. - bradford.Spink commented on October 14th 19 at 12:43
not like that draws the border no offset from the edge of the block. different from the border and only those that takes place inside the block and does not add to the outside... - bradford.Spink commented on October 14th 19 at 12:46
although... well, it nafig this 1 pixel indent - emma_Gleason43 commented on October 14th 19 at 12:49
but, I probably not so understood, what kind of indentation you need.
outline the meaning here is that in the background of this frame will have a red gradient instead of black (on the outside). - darion.Trant commented on October 14th 19 at 12:52

Find more questions by tags CSSHTML