JSFiddle - React, Tailwind, and code Playground

HTML

<div class="frame">
    <div>Я блок с рамкой, обычный блок с обычной рамкой (ну, рисованной, ну, приградиенченной — и что?). Зачем мне всякие излишества типа дополнительных оберток? Но так и быть, ради поддержки давно вымерших браузеров придется затянуть теги потуже, не впервой...</div>
</div>

CSS

.frame {
    position: relative;
    padding: 10px;
    background: url(http://fc06.deviantart.net/fs34/f/2008/238/c/4/Seamless_Brick_Texture_by_Paradise_Awaits.jpg);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#00000000, endColorstr=#66000000);
    zoom: 1;
}

.frame:before{    
    content: '\a0';
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* IE10 */
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);
    /* Opera */
    background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,.4)));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);
    /* Proposed W3C Markup */
    background-image: linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);
}

.frame > div {
    background: #fff;
    padding: 10px;
    position: relative;
}