CODEWITHSUNDEEP
htmlcss
Iglitz
Iglitz

Reputation: 9

Create a border with text inside

I would like to create a border with the text inside as in the annex. I tried different solutions, but I could not get a solution that would also work on mobile versions.

Does anyone have an idea?

example

example

Upvotes: 0

Views: 114

Answers (2)

Khalil DaNish
Khalil DaNish

Reputation: 557

I did like this:

#comments h2 {
    margin-bottom: 0px;
    width: 147px;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    background-color: #fff;
    margin-top: 45px;
}
#comments {
    border: 2px solid #000;
    margin: 30px;
    width: 50%;
    padding: 0 25px;
    height:60px;
    border-radius:30px;
}
<div id="comments" class="comments-area">
<h2>Comments</h2>
</div>

Upvotes: 1

Valeklosse
Valeklosse

Reputation: 1017

div {
  height: 50px;
  width: 600px;
  border: 2px solid black;
  border-radius: 35px;
}
    
h1 {
  text-align: center;
  padding: 0 10px;
  width: 200px; /* Might to adjust this based on screen, using css media query */
  margin-top: 30px; /* Might need to play around with this value based on text size */
  margin-left: auto;
  margin-right: auto;
  background: white;
}
<div>
      <h1>This is a title</h1>
</div>

Basing it off of this Text in Border CSS HTML, the only problem is having to set the background colour to block out the border, which in your case might not be relevant.

Upvotes: 2

Related Questions