Путь SVG к радиусу границы

Question

Можно ли сделать такую ​​форму http://grab.by/Efqk, используя только граничный радиус CSS?

Вот скрипка: http://jsfiddle.net/9tjgof09/

.avatars { 
    padding: 50px; 
    overflow: hidden; 
    list-style: none; 
} 

.avatars strong { 
    display: block; 
} 
.avatars li { 
    float: left; 
    width: 100px; 
    margin-right: 40px; 
} 

.avatar { 
    position: relative; 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
} 

.avatars img { 
    width: 100%; 
    height: 100%; 
    vertical-align: top; 
} 

.avatar-border { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100px; 
    height: 100px; 
} 

.avatar-css img { 
    border-radius: 25px/25px; 
} 

Answer 1

Это возможно, но вам нужно использовать больше, чем просто радиус границы. Вот пример:

fiddle link

#tv { 
position: relative; 
width: 200px; 
height: 150px; 
margin: 20px 0; 
background: red; 
border-radius: 50%/10%; 
color: white; 
text-align: center; 
text-indent: .1em; 
} 
#tv:before { 
content: ''; 
position: absolute; 
top: 10%; 
bottom: 10%; 
right: -5%; 
left: -5%; 
background: inherit; 
border-radius: 5%/50%; 
} 

Answer 2

вы можете сделать все виды формы с помощью CSS, смотрите на аватаре я положил в нижней части вашей, первая длина до радиуса границы является гориз, второй верт. fiddle

#myAvatar{ 
 
    border-top-left-radius:5px 25px; 
 
    border-top-right-radius:20px 55px; 
 
    border-bottom-left-radius:30px 25px; 
 
    border-bottom-right-radius: 50px 25px; 
 
}

<img id="myAvatar" src="http://lorempixel.com/100/100" />