border start next to text CSS

Question

I need to do something like this in css, how to achieve it (look attachment)?

Do I need to use after, before to do something like this or can I do it using only border to do this? Can someone help me with this

Regards

The easy way is to put a white background on that text so that it obscures some of the border. You could certainly use `::before` or `::after`. But your post will be closed shortly, as you haven't posted the required code to demonstrate what you've tried so far. — ralph.m, Aug 31 '23 at 11:00

score 0 · Answer 1 · answered Aug 31 '23 at 13:33

0

A straightforward solution is to embed the HTML that goes in the square in a <fieldset> and use <legend> for the text over the border. Optionally with   before and after the <legend> text for extra spacing.

fieldset { border-radius: 15px }

legend {
    text-transform: uppercase; /* [OPTIONAL] */
    margin: 0 auto;            /* [OPTIONAL], to center the LEGEND */
}

<fieldset>
    <legend>&nbsp;legend&nbsp;</legend>
    <p>Some &lt;p&gt; with text.</p>
    <div>Some &lt;div&gt; with text.</div>
</fieldset>

answered Aug 31 '23 at 13:33

Rene van der Lende

4,992
2
14
25

Is the `
` appropriate here? MDN says it is used for grouping within a web form which I don't think this is. Does proper semantic HTML matter? Not a criticism, a genuine question
– p7dxb Aug 31 '23 at 15:33
1

@p7dxb I care about correct syntax and comprehensible, commented code, semantics not that much. But you're right, 'officially' `
` is part of a `
` and I had the demo in a `
`, but decided it was an irrelevant extra. *Does proper semantic HTML matter?* It's a highly opinionated subject, the operative word being 'opinion'. To each their own...
– Rene van der Lende Sep 01 '23 at 12:07
@p7dxb FWIW: without example code OP question could just as well have been interpreted as being part of a `
`. Came first to my mind anyway.
– Rene van der Lende Sep 01 '23 at 12:11
Thanks for the reply. Funnily enough, there is the exact same discussion on the answer that this question was closed from which uses your `
` solution as well. I had never heard of it before so still a good learning experience for me
– p7dxb Sep 01 '23 at 13:21

p7dxb · Answer 2 · 2023-08-31T12:44:22.490

This might help get you started:

Create a <div> with a border
Create a <span> with a white background
Move the span so that it sits "over" the top of the border

.border{
    border: 3px solid black;
    width: 50vw;
    height: 50vh;
}

.text{
    display: inline-block;
    text-align:center;
    position: relative;
    top: -0.6rem;
    left: 50%;
    padding: 0 0.5rem;
    transform: translateX(-50%);
    background-color: white;
}

<div class="border">
    <span class="text">SOME TEXT</span>
</div>

In this case I have used position: relative
You could also use absolute position if the parent div is also positioned in the document, or the div is already at the top left of the document
For more about positioning see MDN docs position

Musab · Answer 3 · 2023-08-31T11:24:15.330

Create a wrapper div, and set border.
Create a title div inside the wrapper div with background color of white.

You can set the wrapper div position relative. As for the title div, set the position to absolute with left, and right values.

Here's the code example.

.wrapper {
  border: 1px solid;
  border-radius: 10px;
  position: relative;
  margin: 2rem;
  max-width: 400px;
  width: 100%;
  padding: 1rem;
}

.title {
  font-size: 1.5rem;
  font-weight: 600;
  background-color: white;
  position: absolute;
  left: 50%;
  top: -1rem;
  transform: translateX(-50%);
  padding: 0 1rem;
}

<div class="wrapper">
  <div class="title">
    My Heading
  </div>

  <div>
    <p>
      my description text
    </p>
  </div>
</div>

border start next to text CSS

3 Answers3