outline on only one border
Solution 1:
You can use box-shadow
to create an outline on one side. Like outline
, box-shadow
does not change the size of the box model.
This puts a line on top:
box-shadow: 0 -1px 0 #000;
I made a jsFiddle where you can check it out in action.
The syntax is box-shadow: offset-x | offset-y | blur-radius | color
INSET
For an inset border, use the inset keyword. This puts an inset line on top:
box-shadow: 0 1px 0 #000 inset;
Multiple lines can be added using comma-separated statements. This puts an inset line on the top and the left:
box-shadow: 0 1px 0 #000 inset,
1px 0 0 #000 inset;
For more details on how box-shadow
works, check out the MDN page.
Solution 2:
Outline indeed does apply to the whole element.
Now that I see your image, here's how to achieve it.
.element {
padding: 5px 0;
background: #CCC;
}
.element:before {
content: "\a0";
display: block;
padding: 2px 0;
line-height: 1px;
border-top: 1px dashed #000;
}
.element p {
padding: 0 10px;
}
<div class="element">
<p>Some content comes here...</p>
</div>
(Or see external demo.)
All sizes and colors are just placeholders, you can change it to match the exact desired result.
Important note: .element must have display:block;
(default for a div) for this to work. If it's not the case, please provide your full code, so that i can elaborate a specific answer.
Solution 3:
Try with Shadow( Like border ) + Border
border-bottom: 5px solid #fff;
box-shadow: 0 5px 0 #ffbf0e;
Solution 4:
I know this is old. But yeah. I prefer much shorter solution, than Giona answer
[contenteditable] {
border-bottom: 1px solid transparent;
&:focus {outline: none; border-bottom: 1px dashed #000;}
}