Center text in rounded border

Question

I want to create a rounded border, and put some text in the middle of the top border like this:

I tried altering the solution posted on this previous question, but I couldn't get the bottom border of the text to match up with the border of the div below (the snippet below is using tailwindcss, but you get the idea):

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>

<div class="pt-3">
  <h2 class="w-full text-center border-t rounded-t-lg border-gray-600" style="line-height: 0.1">
    <span class="bg-white px-3 text-sm font-medium">SOME TEXT</span>
  </h2>
  <div class="px-5 pb-5 pt-4 border-b border-r border-l border-gray-600 rounded-md">
  </div>
</div>

How can I accomplish this?

score 0 · Answer 1 · answered May 28 '20 at 16:50

0

Your span already hides the border, keep it on the container and remove it from title.

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>

<div class="pt-3">
  <h2 class="w-full text-center" style="line-height: 0.1">
    <span class="bg-white px-3 text-sm font-medium">SOME TEXT</span>
  </h2>
  <div class="px-5 pb-5 pt-4 border-b border-t border-r border-l border-gray-600 rounded-md">
  </div>
</div>

answered May 28 '20 at 16:50

G-Cyrillus

101,410
14
105
129

Thanks! This worked perfectly, I'll just wait a bit to give you the accepted answer in case anyone else has another solution :) – I_A May 28 '20 at 16:53

score 0 · Answer 2 · answered May 28 '20 at 19:50

If you want to use only HTML and CSS then you can do it like:

div {
  height: 60px;
  width: 200px;
  border: 2px solid black;
  border-radius: 10px;
}

h3 {
  width: 35px;
  margin-top: -10px;
  margin-left: 80px;
  background: white;
  padding:0px 2px;
}

<div>
    <h3>Text</h1>
</div>

Center text in rounded border

2 Answers2

Linked