CSS: how to make scrollbar appear outside div's border?

Well, if that won't work, and you're married to the design, I think you have to use a bg image. I can't find a way to style the scrollbar with CSS. I made another jsfiddle with this solution demonstrated: http://jsfiddle.net/jlmyers42/mrx46geg/

But basically, you just move some of your CSS around:

#sb_body {
  width: 272px;
  height: 300px;
  overflow: auto;
  padding: 0;
  margin: 0;
  background: url("http://arcsuviam.com/play/random/bluebg.png") no-repeat left top;
}
div#sb_messages_set {
  margin: 5px;
}
div.sb_message {
  padding: 2px 4px 5px 4px;
  border-bottom-style: dashed;
  border-width: 1px;
  border-color: black;
}

I'd put the whole thing in a container that has the overflow:auto style applied.

See this fiddle: http://jsfiddle.net/jlmyers42/8tptqt19/

<div id="sb_body">
  <div id="sb_container">
    <div id="sb_messages_set">
        <div class="sb_message">
            <div class="sb_message_header">
                <div class="sb_message_author">PookyFan</div>
                <div class="sb_message_hour">12:11</div>
            </div>
            <div class="sb_message_content">test</div>
        </div>
    </div>
  </div>
<!-- Some other chatbox's elements -->
</div>

CSS
div#sb_container {
  overflow: auto;  
}