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

Html – How can i add border infront of text?

I am trying to add border infront of text but i am not able to do that .
I have added the image , can anyone tell how i can complete this ?
sample image

I am trying to add border infront of text but border is getting added to whole div. I am trying to add border only infront of text.

Tags:

3

Answers


  1. 0

    enter image description here

    The example above is from MDN Webdocs,refereence link

    The <fieldset> element is used to group related elements in a form. The element defines

    a caption for the <fieldset> element and it will appear on the border of the <fieldset>.

    This will render a box with the words "Text on Border" on the top border of the box. The element provides this feature in conjunction with the <fieldset> element.

    Login or Signup to reply.
  2. 0 
    #a {
  border: 4px solid black;
  display: inline-block;
  border-left: none;
  position: relative;
  padding-right: 0.5em;
}

#b {
  display: inline-block;
  background: yellow;
  position: absolute;
  top: -0.6em;
}

#c {
  display: inline-block;
  background: cyan;
  position: relative;
  top: 0.6em;
}
    <br>
<div id="a">

<div id="b">
Welcome to
</div>

<div id="c">
Momentto Caffe
</div>

</div>
    Login or Signup to reply.
  3. 0

    Add a ::before with white border.

    .a {
  display: flex;
  flex-direction: column;
  color: white;
  position: relative;
}

.a::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid white;
}

.a div {
  position: relative;
  z-index: 1;
  height: 20px;
  width: max-content;
  padding: 0 5px;
}

.a,
.a div {
  background: black;
}
    <div class="a">
  <div>abc</div>
  <div>defgh</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search