How to Code A Border with a Gap for Text

Ever wonder how to get the effect of having a border around a widget, while leaving a gap for a widget title like this:

It’s actually a lot simpler than you would think!

The code below is for Genesis, but you can adapt it for any other theme. Just add the following to your theme’s CSS. Make sure to change the class selectors to match those used in your theme!

.sidebar .widget {
  background-color: #fff;
  border: 2px solid #000;
}

.widget-title {
  text-align: center;
  background: #fff;
  padding: 15px 10px;
  margin-top: -60px; 
}

The negative number for margin-top is where the magic happens. The greater the negative number, the higher the widget title will be pulled upwards. This, combined with setting the background color of .widget-title, is essentially what gives the desired effect.

Want more tips to better your blog? Subscribe to my weekly tipletter for exclusive tips, tricks, and offers delivered straight to your inbox.