Layout. How to implement border inside the block, and not on its border? Example in description

Question

css

I want to get rid of the background-image, I will make the gradient through box-shadow in css, but how to make a dotted line?


You need to get by with one tag to feed it later jqueryui.com/demos/button/
Any ideas?

Answer 1

<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 get the proper effect, pay attention, the shadow should look in all 4 directions so as not to spoil the figure.

Answer 2

outline:1px dashed red;
outline-offset:-4px;

Answer 3

I will add CaptainQuazar. 4 shadows are not needed, one is enough.

<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>

Answer 4

outline: 1px solid #color;