title: bracket style border around elements
body: <p>I'm looking for a way to implement a bracket style border around my <code>&lt;h2&gt;</code> headings; I've attached an image showing exactly what I'm trying to accomplish.</p>
  
  <p>The only way I can think of to achieve this effect is by using images, but I'm unsure of exactly how to do so(all of my <code>&lt;h2&gt;</code>s are of varying length/height, or if maybe there is a better way.</p>
  
  <p>Any tips &amp; insight are greatly appreciated.</p>
  
  <p>**I hate to resurrect this, but what can I look towards as being the solution to the problem shown int he updated image? The right line is too far right, as well as some opacity issues above and below the text..</p>
  
  <p><img src="https://i.stack.imgur.com/yZLQG.jpg" alt="bracket borders"></p>
  
  <p>UPDATE: <img src="https://i.stack.imgur.com/KbX2U.png" alt="updated image"></p>