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

Asked by precia carraway

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

Need to do with one tag, then to feed it jqueryui.com/demos/button/
Any ideas?

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

Answers

guillermo goddard

<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, note that the shadow should look in all 4 directions so as not to spoil the shape.
Replies:
wow, it looks like this is what you need ...
Thank! - pouriya parsa
I finished a little…
 
	min-width: 100px;
	background: #aa0808;
	border: #fff dashed 1px;
	border-radius: 5px;
	box-shadow: inset #e20b0b -1px 26px 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;

It turned out that's what :)
- colette pezley
melissa sandfort
outline: 1px dashed red;
outline-offset: -4px;
ali winter
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>
Replies:
Thank you very much, but I forgot about the fourth indicator. - cyndie
b fay
outline: 1px solid #color;
Replies:
ups.
dashed, not solid. - william j
doesn’t seem to be the one that draws a border without indentation from the edge of the block. It differs from the border only in that it takes up space inside the block itself, and does not add it outside ... - teresa giugliano
although ... maybe it’s okay, this 1 pixel indentation is - noraini
but, then I probably didn’t understand that I needed an indent .// The meaning of the outline here is that on the background of this frame there will be a red gradient, not black (as outside). - john stahl
From which book to start learning Java? :: FreeBSD and ZFS :: How much can an experienced web developer get today? :: Geographically Distributed MySQL :: What books should I read to learn how to design for iPhone / iPad?
Leave Repply for Layout. How to implement a border inside a block, and not on its border? An example in the description
Useful Links