Question 108402 in Html Question posted in
Some basic documentation can be found here.

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

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search