Tight borders to the div title

Question

I would like to put my title in the top middle part of the div on the border. The following code does the job.

However, I have many panels with different titles. They do not have the same width. I look for a way to keep the borders tight to the title.

Is it possible to achieve?

.box{
    border: solid 1px #888;
    padding: 15px 15px;
}

.box span{
    color:red;
    width:200px;
    margin: 0 auto;
    display: block;
    margin-top:-25px;
    background-color:white;
    text-align:center;
}

<div class="box">
<span>panel title</span>
content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
</div>

Answer 1

I'm a little carried away on the example, but at least you'll probably see lots of interesting stuff

/* the basic reset */
*
{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html
{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* any variables */
:root
{
  /* a basic theming (based on AtomOneDark) */
  --od-black  : #383c44;
  --od-dark   : #5c6370;
  --od-gray   : #818896;
  --od-light  : #abb2bf;
  --od-white  : #f1f8ff;
  --od-red    : #be5046;
  --od-orange : #d19a66;
  --od-yellow : #e6c07b;
  --od-green  : #98c379;
  --od-teal   : #56b6c2;
  --od-blue   : #61aeee;
  --od-purple : #c678dd;
  --od-fushia : #e06c75;

  /* the BOX component parameters */
  --box-margin: 1.5em 0.5em;
  --box-padding: 1em;
  --box-min-width: 14em; 
  --box-inner-padding: 0.75em;
  --box-border-color: var(--od-black);
} /* and that supported by all modern browsers */

/* Main box */
.box{
  display: block;
  
  margin: var(--box-margin);
  padding: var(--box-padding);
  
  /* calculate the box min width by width of title + padding */
  min-width: calc(var(--box-min-width) + ( var(--box-padding) * 2 ) );
  
  color: var(--od-light);
  background-color: var(--od-black);
  
  border-top: solid 2px var(--box-border-color);
  border-bottom: solid 2px var(--box-border-color);
  
  /* adjust the border radius for proportional and beautifull effect */
  border-radius: calc( var(--box-padding) / 3 );
}

/* Ha ! the box title */
.box header{
  /* define simple transition for cool UI */
  transition-property: width, border-color;
  transition-duration: .9s;
  transition-delay: .3s;
  transition-timing-function: ease-out;
  
  position: relative;
  display: block;
  
  margin: 0 auto;
  /* placing title at the good pos
    formulas : -(parent padding + (height/2)) 
  */
  margin-top: calc( -1 * ( var(--box-padding) * 2 ) );
  
  width: var(--box-min-width);
  height: calc( var(--box-padding) * 2 );
  
  line-height: calc( var(--box-padding) * 2 );
  text-align:center;
  text-transform: capitalize;
  
  /* a cool background */
  background: linear-gradient(to bottom right, var(--od-blue), var(--od-teal));
  color: var(--od-white);
  
  /* border design */
  border-width: 3px;
  border-style: solid;
  border-top: none;
  border-bottom: none;
  border-left-color: var(--box-border-color);
  border-right-color: var(--box-border-color);

  border-radius: var(--box-padding);
}
/* a small animation indicates to the user that it is reactive and that we are above this element. 
The cursor is often out of sight for a while, when we are too focused.  */
.box:hover header,
.box:focus header,
.box header:hover
{
  /* on in transition*/
  transition-delay: 0s;
  transition-duration: .3s;
  transition-timing-function: ease-in;
  
  width: calc( var(--box-min-width) + ( var(--box-padding) * 1.75 ) );

  border-left-color: transparent;
  border-right-color: transparent;
}

/* content and footer */
.box content, 
.box footer
{
  padding: var(--box-inner-padding);
}

/* content elements, here, headings title */
.box content h1{ color: var(--od-white)}
.box content h2{ color: var(--od-blue)}
.box content h3{ color: var(--od-teal)}

/* content elements; here, paragraph */
.box content p
{
  padding: var(--box-inner-padding);
  /* note : indent margin is based on parent padding */
  margin: var(--box-inner-padding) calc( var(--box-inner-padding) * 2 );
  
  background-color: var(--od-dark);

  border-radius: calc( var(--box-inner-padding) / 3 );
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="box">
  <header>
    panel title
  </header>
  <content>
    <h1>Hey ! i'm heading #1</h1>
    Ok, me, I am normal body text. 
    <p>
      I'm a simple paragraph !
    </p>
    <h2>Hey ! i'm heading #2</h2>
    <p>
      Ho ! Ho ! Me I'm an other paragraph ...
    </p>
    <h3>Hey ! i'm heading #3</h3>
    That heading is crazy rock !
  </content>
  <footer>
     Well, after all, I AM THE FOOTER HA ! HA ! Haaa ... (-.-) 
  </footer>
</div>

</body>
</html>

Answer 2

Apply following CSS:

.box{
        border: solid 1px #888;
        padding: 15px;
        position:relative;
        margin-bottom:25px;
    }

    .box span {
        color:red;
        display: block;
        padding:0 20px;
        top:-5px;
        background-color:white;
        text-align:center;
        position:absolute;
        left:50%;
        transform: translateX(-50%) translateY(-50%);
    }

Answer 3

You could do something like this:

.wrapper {
position:relative;
margin:20px;
}

.title {
position:absolute;
left: 50%;
top:0;
transform: translateX(-50%) translateY(-50%);
background-color:white;
padding:4px 10px;
}

.box{
    border: solid 1px #888;
    padding: 15px 15px;
}

<div class="wrapper">
 <div class="title">Panel Title</div>
<div class="box">
content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
</div>
</div>

<div class="wrapper">
<div class="title">Longer Panel Title</div>
<div class="box">
content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
</div>
</div>

Answer 4

instead of width use padding and give display table for span.

.box span {
    display: table;
    padding: 0 95px;
}