Solution 1 :

This is possible with the <fieldset> and <legend> elements.

legend {
  margin: 0 auto;
}
input {
  width: 100%;
}
<form>
  <fieldset>
    <legend>Comment</legend>
    <input type="text" placeholder="Add your comment"/>
  </fieldset>
</form>

Problem :

enter image description here

I need to make something like this container which has a border and centered caption.

Comments

Comment posted by forms element reference

The

Comment posted by Ammar Saleh

thanks for downvoted, but already I used

element but it appears without border.

Comment posted by Sean

Please include your HTML and CSS as part of the question to show that effort.

Comment posted by Ammar Saleh

Thanks, buddy but the border doesn’t appear.

Comment posted by Sean

Please include your HTML and CSS as part of the question. It’s impossible to help you otherwise.

Comment posted by Alohci

This doesn’t centre the legend in Firefox. If you use

Comment posted by Sean

Thanks @Alohci. I’ve edited to make that improvement.

By

Leave a Reply

Your email address will not be published. Required fields are marked *