Html css помогите для вас это мелочь . вопрос с   border-radius: 50%; . имеется скрин

Самые простые способы, пришедшие в голову:

Вариант 1: Поверх фотографии накладывается подготовленное png-изображение с прозрачным центром и полупрозрачными краями.

Вариант 2: Поверх прямоугольного тега с фотографией, в котором к фотографии применены фильтры снижения цветности / контрастности, накладывается другой тег с border-radius: 50%; и с той же самой фотографией, но уже полноцветной.

И в обоих случаях производится накладывание HTML-тегов.

 ну
первый способ
легче 

 <style>
svg{background: url('1.jpg'); } </style>
<svg viewbox="0 0 50 50" width="500" height="500">
<defs>
<mask id="mask" x="0" y="0" width="50" height="50">
<rect x="0" y="0" width="500" height="500" fill="#fff"/>      <circle cx="25" cy="25" r="25" /></mask></defs>
<rect x="0" y="0" width="500" height="500"   mask="url(#mask)" fill-opacity="0.5"/></svg> 

   <style> 
   .round { 
    border-radius-transparent: 50%; 
   } 
  </style> 
  
  <img src="foto.jpg" alt="" class="round">