JSFiddle - React, Tailwind, and code Playground

HTML

<!--[if lte IE 9]>
<style>
.dialog {
    background-clip: border-box;
    border: 3px #ddcc00 double;
    margin-top: 40px;
    padding: 15px 15px 20px;
}
.dialog:before {
    content: '⊗';
    color: #ddcc00;
    font: 1.5em/1;
    position: absolute;
    top: -4px;
    left: auto;
    right: 0;
    bottom: auto;
    z-index: 0;
}
</style>
<![endif]-->
<div class="dialog">
    <p>Художница нарисовала рамку диалога, для новой онлайн игры. Требуется сверстать её на прозрачном фоне, примерно вот так:</p>
    <ol>
        <li>Рамка должна растягиваться по высоте и ширине. Либо в зависимости от контента, либо при заданной ширине и высоте контейнера.</li>
        <li>Не обязательна поддержка IE.<span class="sbrace"> </span> <span class="hbrace">(</span>т.е. вы можете использовать любые современные CSS технологии: мультибекграунды, border-image и т.п)</li>
        <li>Чем меньше html-тегов тем лучше<span class="sbrace"> </span> <span class="hbrace">(</span>Надеюсь у вас получиться сделать что-то элегантнее чем таблица на 9 ячеек =)).</li>
        <li>Чем меньше отдельных файлов графики — тем лучше.</li>
        <li>Без яваскриптов</li>
        <li>Сам контейнер будет всегда с position:absolute<span class="sbrace"> </span> <span class="hbrace">(</span>это может упростить вам задачу)</li>
    </ol>
</div>

CSS

.dialog {
    position: absolute;
    background: #1b2f4a;
    background-clip: padding-box;
    color: #fff;
    top: 5%;
    left: 25%;
    right: 25%;
    border: transparent solid;
    border-width: 60px 60px 65px;
}
.dialog::before {
    content: '';
    position: absolute;    
    z-index: -1;
    content: '';
    position: absolute; 
    top: -60px;
    left: -60px;
    right: -60px;
    bottom: -65px;
    border-width: 120px 100px 140px;   
    -webkit-border-image: url(http://usabili.ru/news_imgs/151/border7.png) 120 100 140 100 repeat stretch;
    -moz-border-image: url(http://usabili.ru/news_imgs/151/border7.png) 120 100 140 100 repeat stretch;
    -ms-border-image: url(http://usabili.ru/news_imgs/151/border7.png) 120 100 140 100 repeat stretch; 
    -o-border-image: url(http://usabili.ru/news_imgs/151/border7.png) 120 100 140 100 repeat stretch; 
    border-image: url(http://usabili.ru/news_imgs/151/border7.png) 120 100 140 100 repeat stretch;
}

.dialog :first-child {
    margin-top: 0;   
}