Is it possible to achieve a -like effect without using the tag?

Question

I personally like the

tag because of how it draws a box and puts the

at the top of it, over the border. Like this.

Answer 1

Here a possible solution with a focus on simplicity (if you can loose your requirement for transparent background a bit). No additional elements.

section {
  border: 2px groove threedface;
  padding: 1em;
}

section h2 {
  float: left;
  margin: -1.7em 0 0;
  padding: 0 .5em;
  background: #fff;
  font-size: 1em;
  font-weight: normal;
}

  

    Foo
  
  bar