How to make a boundary so that the line from the top consists of two parts

Question

There is a border that is divided into two parts, the indent between them is about 80px, inside this space is the text - Gold. How do I make this border? Preferably done in pure CSS and HTML.

Example:

An example of how this boundary should look like

Here I tried to make this frame, as in the example above, but it turned out, to put it mildly, not very good. I can't make a bordering radius and move the space to the left side.

body {
  background: #333;
}

.frame {
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    border-top: 0px solid #FFF;
    border-radius: 17px;
    padding: 0;
    margin-top: 30px;
}

.top-line {
    display: flex;
    justify-content: space-between;
}

.top-line-left,
.top-line-right {
    flex: 1;
    height: 1px;
    background-color: #FFF;
}

.top-line-left {
    margin-right: 80px;
}

.content {
    padding: 20px;
}

<div class="frame">
    <div class="top-line">
        <div class="top-line-left"></div>
        <div class="top-line-right"></div>
    </div>
    <div class="content"></div>
</div>

P.S. I just started to learn HTML and CSS, don't judge the code too harshly. I will be glad to any criticism and advice

Please add sufficient HTML and CSS to show the issue as a [mcve]. Empty divs collapse — mplungjan, May 01 '23 at 16:55
They have no content, just white borders and hence seem to be invisible. I added a dark background for `body`. — InSync, May 01 '23 at 17:07
I think, it's answered here: https://stackoverflow.com/questions/28221179/hide-part-of-a-border-in-css — Ferris, May 01 '23 at 17:20

score 1 · Answer 1 · answered May 01 '23 at 17:07

one easy way to make that effect is to use the HTML tags fieldset and legend

.frame{
  height:200px;
  background-color:/* blue */;
  border-radius: .5rem;
  border:red 2px solid;
  outline:none;
}

<fieldset class="frame">
  <legend>
   Gold
  </legend>
   
</fieldset>

score 0 · Accepted Answer · answered May 01 '23 at 17:13

If the outter background color is known, you can do something like this:

body {
  background: #333;
}

.frame {
    border: 1px solid #FFF;
    border-radius: 17px;
    padding: 0;
    margin-top: 30px;
    position: relative;
}

.frame .title {
    background: #333;
    position: absolute;
    top: -8px;
    left: 30px;
    padding: 0 10px;
}

.content {
    padding: 20px;
}

<div class="frame">
    <span class="title">The title</span>
    <div class="content">
         <p>content</p>
    </div>
</div>

Adjust the top, left, padding of .title class to match your layout

How to make a boundary so that the line from the top consists of two parts

2 Answers2