drop-shadow filter (applied to border only)

dabblet.css

/**
 * drop-shadow filter (applied to border only)
 *
 * Unfortunately... this sacrifices the shadow on the arrow. Looks
 * weird with its own shadow on it.
 */

html {
  background: url('http://subtlepatterns.com/patterns/purty_wood.png')
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.speech-bubble {
  position: relative;
  float: left;
  width: 400px;
  text-align: center;
  padding: 1em;
  margin: 1em;
  color: white;
  font: bold 200% sans-serif;
}

.speech-bubble:after {
  content: '';
  position: absolute;
  bottom: -2em;
  left: 10%;
  margin-left: -.5em;
  border: 1em solid transparent;
  border-top-color: inherit;
}

.variation1 {
  -webkit-filter: drop-shadow(.05em .05em .3em rgba(0,0,0,.6));
  filter: drop-shadow(.05em .05em .3em rgba(0,0,0,.6));
  border: 10px solid;
}

.variation2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 380px;
  height: 90%;
  -webkit-filter: drop-shadow(.05em .05em .3em rgba(0,0,0,.6));
  filter: drop-shadow(.05em .05em .3em rgba(0,0,0,.6));
  border: 10px solid;
  z-index: -1;
}

dabblet.html

<div class="speech-bubble variation1">A speech bubble! Fancy!</div>
<div class="speech-bubble variation2">A speech bubble! Fancy!</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}