css create border line with specific effect

Question

How can I create the above effect in css border?

What effect would that be? What HTML are you working with, where did you get stuck? Did you look at the [`border-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) property? Or SVG? Did you do any research? Where did that lead you, how did it not work or satisfy your expectations? — David Thomas, Feb 26 '22 at 19:55
If it was such easy, I would not ask! Can't you see there is a 3D depth effect? — Unknown developer, Feb 26 '22 at 21:17

score 1 · Accepted Answer · answered Feb 26 '22 at 22:22

You can use box shadow for additional border effect. For more detailed examples please check Double border with different color

  <hr> 
  <style>
    body {
      background: #1f1f1f;
    }

    hr {
      border: none;
      height: 2px;
      background: #000;
      box-shadow: 0 1px 0 0 #404040;
    }
  </style>

css create border line with specific effect

1 Answers1