Help, please, how to make such a stroke?

I made the border-bottom,left,right . And how to make the top part and the text I do not understand. I know that ::before and ::after , but something still does not work.

    2 answers 2

    Use fieldset + legend :

     * { box-sizing: border-box; } html, body { padding: 0; margin: 0; } body { background: #333; } input { height: 40px; display: block; width: 100%; margin: 10px 0; border-radius: 20px; border: none; } legend { color: #fff; text-align: center; padding-left: 10px; padding-right: 10px; } form { margin: 50px; padding: 20px; } fieldset { border: 2px solid #fff; border-radius: 5px; } 
     <form> <fieldset> <legend>Personalia:</legend> <input type="text"><br> <input type="text"><br> <input type="text"> </fieldset> </form>

      Of course, the @HamSter answer is optimal, and it’s right to use just such an option in the layout of the forms. But if you need to stylize just some divs (and not forms) in the same way, then pseudo-elements are quite suitable for this:

       body { background-color: gray; } form { border: 2px solid white; border-top: 0; border-radius: 15px; padding: 30px 10px 10px; margin: 50px; width: 290px; position: relative; } form:after, form:before { content: ''; display: block; width: 70px; height: 30px; border-top: 2px solid white; position: absolute; top: 0; } form:before { border-left: 2px solid white; border-top-left-radius: 15px; left: -2px; } form:after { border-right: 2px solid white; border-top-right-radius: 15px; right: -2px; } span { color: white; position: absolute; top: -10px; left: 90px; font-family: Arial, sans-serif; font-size: 15px; } input { width: 240px; height: 20px; margin: 10px; border-radius: 10px; padding: 3px 15px; border: none; outline: none; } 
       <form> <span>Заголовок формы:</span> <input type="text"><br> <input type="text"><br> <input type="text"> </form>

      • Only now the text left i.stack.imgur.com/p8MvH.png - andreymal
      • one
        @andreymal, I do not know - everything is fine with me. Apparently, you are not looking at chrome)) but this is just a matter of fitting the size - you can do cross-browser and even adaptive - humster_spb