Border-image

Рамка у блока из картинки

by vovkasolovev

HTML

<div class="delivery1_box">
			<p>Доставка в регионы РФ осуществляется службой EMS до двери получателя, а также любой Транспортной компанией и Почтой России.</p>
			<p>Сроки и стоимость доставки зависят от веса выбранного мишки и удаленности вашего города.</p>
</div>
<br><br>
<div class="delivery1_box box2">
			<p>Доставка в регионы РФ осуществляется службой EMS до двери получателя, а также любой Транспортной компанией и Почтой России.</p>
			<p>Сроки и стоимость доставки зависят от веса выбранного мишки и удаленности вашего города.</p>
    <p>Доставка в регионы РФ осуществляется службой EMS до двери получателя, а также любой Транспортной компанией и Почтой России.</p>
</div>

CSS

.delivery1_box {
width: 550px;
padding: 20px;
margin: auto;
border-style: solid;
-moz-border-image: url('http://teddyboo.ru/images/block8/b8_border.png') 9 9 12 round;
-webkit-border-image: url('http://teddyboo.ru/images/block8/b8_border.png') 9 9 12 round;
-o-border-image: url('http://teddyboo.ru/images/block8/b8_border.png') 9 9 12 round;
border-image: url('http://teddyboo.ru/images/block8/b8_border.png') 9 9 12 round;
border-width: 9px 9px 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background-color: #ecefef;
background: -webkit-linear-gradient(top, #f1f3f1, #e8ebec);
background: -moz-linear-gradient(top, #f1f3f1, #e8ebec);
background: -ms-linear-gradient(top, #f1f3f1, #e8ebec);
background: -o-linear-gradient(top, #f1f3f1, #e8ebec);
-pie-background: linear-gradient(270deg, #f1f3f1 0%, #e8ebec 100%);
-webkit-box-shadow: 0px 1px 3px 0px rgba(130, 100, 60, 0.4);
-moz-box-shadow: 0px 1px 3px 0px rgba(130, 100, 60, 0.4);
box-shadow: 0px 1px 3px 0px rgba(130, 100, 60, 0.4);
}
.delivery1_box.box2 {
     width: 350px!important;   
}
}