Question

Помогите закруглить изображение

 

.page-wrapper {
  display: flex;
}
.left-panel-wrapper {
  width: 324px; position: relative;
  background-color: orange;
}
.right-panel-wrapper {
  width: 324px; position: relative;
  background-color: green;
}
.content-wrapper {
  width: 162px; position: relative;
  background-color: blue;
}

.tournaments-team-name{
 position: relative;
 font: 13px "Montserrat";
 text-align: center;
 line-height: 60px;
}

.left-panel{
 position: absolute;
 top: 0;
 left: 10px;
 height:60px;
 width:140px;
 overflow:hidden; 
}

.right-panel{
 position: absolute;
 top: 0;
 right: 10px; 
 height:60px;
 width:140px;
 overflow:hidden;
} 

.tournaments-team-img img{
 width: 140px;
}

 

<div class="page-wrapper">
 <div class="left-panel-wrapper">
   <div class="tournaments-team-name">
   s1mple
   </div>
   <div class="left-panel"><div class="tournaments-team-img-radius"><div class="tournaments-team-img"><img src="https://csgosettings.ru/_ld/0/44254442.png"></div></div></div>
 </div>
  
<div class="content-wrapper"></div>
  
 <div class="right-panel-wrapper">
   <div class="tournaments-team-name">
   electronic
   </div>
   <div class="right-panel"><div class="tournaments-team-img"><img src="https://csgosettings.ru/_ld/0/66930306.png"></div></div>
 </div>
</div> 

Должно как-то так выйти

Answer 1

Приведите пример страницы сайта на которой вы все это настраиваете, именно конкретный пример.

Comments

https://csgosettings.ru/tournaments-csgo/pgl_major_stockholm_2021/new_challengers_stage/natus_vincere_vs_virtus_pro/2-1-0-2

---

Админ CSGOSETTINGS.ru,

получится ли помочь?

---

Админ CSGOSETTINGS.ru,

параметр border-radius: 50%; добавляет закругление, но причина проблемы в другом, вы применяете overflow: hidden; в строке 3046 и размеры фото изначально большие, в итоге в скрываете границы с помощью overflow: hidden; и не сможете увидеть закругления.

• Вам нужно изначально размеры авок уменьшить к размерам 140х60 чтобы оригинал был такой, а не как сейчас 400х417

---

Yuri_Geruk,

А без изменения размеров изображений такое получится ли реализовать?

---

Админ CSGOSETTINGS.ru,

В вашем случае нет, так как закругление уходит за рамки которые скрывает overflow: hidden