Border-image

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

by vovkasolovev

HTML

<div class="box">
<p>stretch — Default value. The image is stretched to fill the area</p>
<p>repeat — The image is tiled (repeated) to fill the area</p>
<p>round — The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so it fits</p>
<p>space — The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles</p>	
<p>initial — Sets this property to its default value.</p> 
<p>inherit — Inherits this property from its parent element.</p>
</div>

<img class="plate" src="https://vovkasolovev.ru/wp-content/uploads/photo/2017-05-19-vermeer/Vermeer-1665–1666-Girl-with-a-Red-Hat.jpg" alt="">

CSS

.box {
font-family: sans-serif;
font-size:13px;
width: 500px;
padding: 20px;
margin: 20px;
border: 10px solid transparent;
border-image-slice: 10 10 10 10;
border-image-width: 10px 10px 10px 10px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: round round;
border-image-source: url(http://vovkasolovev.ru/lj/light-border.gif);
}

.plate {
width:200px;
margin: 0 0 50px 0;
border: 50px solid transparent;
border-image-source: url(https://avatanplus.com/files/resources/original/5c7f4f63568e6169514e1c1b.png);
border-image-repeat: round;
border-image-slice: 250 fill;
border-radius: 50%;
}