Вставить граничный радиус для изображения

Question

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

Вот что я хочу добиться:

Спасибо!

Answer 1

Один из способов:

<div class="container"> 
    <div class="dot1"></div> 
     <div class="dot2"></div> 
     <div class="dot3"></div> 
     <div class="dot4"></div> 
    <img src='http://placehold.it/400x300'> 
</div> 

CSS:

.container { 
    position:relative; 
    margin:50px auto; 
    width:400px; 
} 
.dot1 { 
    background-color:white; 
    width:50px; 
    height:50px; 
    border-radius:100%; 
    position:absolute; 
    left:-25px; 
    top:-25px; 
} 
.dot2 { 
    background-color:white; 
    width:50px; 
    height:50px; 
    border-radius:100%; 
    position:absolute; 
    right:-25px; 
    top:-25px; 
} 
.dot3 { 
background-color:white; 
    width:50px; 
    height:50px; 
    border-radius:100%; 
    position:absolute; 
    right:-25px; 
    bottom:-25px; 
} 

.dot4 { 
background-color:white; 
    width:50px; 
    height:50px; 
    border-radius:100%; 
    position:absolute; 
    left:-25px; 
    bottom:-25px; 
} 

Демо: http://jsfiddle.net/ofejxfj6/

Вы можете настроить его немного (размер кругов/точек и размеров), но это довольно закрыть, ИМХО.