CSS границы изображения прозрачность/цвет вопрос

Question

Я хотел сделать прохладный DIV, так что я сделал это изображение, чтобы получить свои границы:

Проблема заключается в том, что половина границы прозрачны область, так когда я пытаюсь заполнить пустой центр div фоновым цветом, он также рисует внешнюю прозрачную область. Я бы хотел, чтобы цвет фона не проходил мимо границы.

Вот что я говорю:

@charset "utf-8"; 
 
/* CSS Document */ 
 

 
#testDiv{ 
 
\t border-image-source:url(https://s9.postimg.org/40j461sf3/Div_Sprite.png); 
 
\t border-image-slice: 50% 25% 25%; 
 
    border-image-repeat:repeat; 
 
\t border-image-width:auto; 
 
\t border-image-repeat:round; 
 
    background-color: red; 
 
    
 
\t min-height:600px; 
 
\t width:600px; 
 
} 
 

 
#body { 
 
    height:100%; 
 
    width: 100%; 
 
    background: #CCC; 
 
    position: absolute; 
 
    margin: 50px 0 0 0; 
 
}

<div id="testDiv"> 
 

 
</div>

^{Или увидеть http://jsfiddle.net/6M59T/119/.}

Как я могу это решить? Я подумал о том, чтобы положить немного меньший div внутри этого, но я не знаю, как настроить его, чтобы он всегда покрывал немного меньше, чем его родитель. Кроме того, я хотел бы сохранить его максимально простым. Есть идеи?

Answer 1

Возможно, я ошибаюсь, но вы можете попробовать сыграть с атрибутом border-image-outset и margin.

float:left; 
margin:50px 20px; 
border-image-source:url(http://s9.postimg.org/40j461sf3/Div_Sprite.png); 
border-image-slice: 50% 25% 25%; 
border-image-repeat:repeat; 
border-image-width:auto; 
border-image-repeat:round; 
background-color: red; 
border-image-outset:30px; 

http://jsfiddle.net/6M59T/120/