How to draw such a border?

Question

css

Answer 1

Good afternoon! I tried something like this:

<div class="container">
      <button>
        Click me
      </button>
    </div>

body, html {
        min-width: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
        font: Arial 14px;
      }
      .container {
        width: 100%;
        height: 100px;
        border-bottom: 1px solid yellow;
        position: relative;
      }
      .container button {
        position: absolute;
        bottom: -20px;
        transform: translateX(-50%);
        left: 50%;
      }
      .container::before {
        content: "";
        transform: translateX(-50%);
        bottom: -20px;
        width: 100px;
        height: 20px;
        background: white;
        position: absolute;
        left: 50%;
        border: 1px solid yellow;
        border-top: 0px;
      }

Well, rounding can then be added. This is the very principle of operation. The code is not beautiful, I wrote quickly)