css outline left and right

Question

Anyway to set css outline only show left and right ? Because I can't use border, I tried but it will make more bad outlook .

.test{
  margin:10px;
  padding:10px;
  width:100px;
  height:10px;
  outline:10px solid #000;
  }

<div class="test"></div>

Can't be done with the outline property. Per the spec: The outline is the same on all sides. In contrast to borders, there is no 'outline-top' or 'outline-left' property — j08691, Apr 02 '15 at 02:37
possible duplicate of [outline on only one border](http://stackoverflow.com/questions/12671898/outline-on-only-one-border) — , Apr 02 '15 at 02:43

score 77 · Accepted Answer · answered Apr 02 '15 at 11:03

77

You could possibly achieve this using two box shadows:

div {
  margin: 10px;
  padding: 10px;
  width: 100px;
  height: 10px;
  box-shadow: -5px 0px 0px 0px black, 5px 0px 0px 0px black;
}

<div></div>

answered Apr 02 '15 at 11:03

jbutler483

2

Perfect! Works like a charm! – LanfeaR Sep 05 '17 at 08:32
2

@Andrew Not quite sure what you mean? The [Box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) CSS property allows you to apply multiple values in a single declaration. – jbutler483 Jul 28 '20 at 20:11
I mean exactly what I said, which is true. – Andrew Jul 29 '20 at 06:55
Is there a performance hit compared to just an outline? – sam Apr 10 '22 at 07:36
@Andrew - I'm confused by your comments; nobody claimed there was a `box-shadow-right`. There's also no property called `box-shadow-lollipop`... [`outline` documentation](https://developer.mozilla.org/docs/Web/CSS/outline) And, as j08691 pointed out, there is no `outline-left` or 'outline-right`, and so jbutler483 offered a (rather creative) alternative method of achieving the same result using `box-shadow` to draw a [solid] "shadow" on any of the top, bottom, left, or right, as desired. – ashleedawg Dec 04 '22 at 11:13

1 Answers1