Как сделать равномерный бордер радиус по контейнеру?

Question

[Old_Chicken]

Подскажите , как сделать равномерное закругление по всему блоку в котором есть вертикальный скролл , просто у краев которые рядом со скролом нету закругления ?

Comments

[Kentavr16]

есть подозрение что он просто не влезает.

[Раджаб Магомедов]

Скорей всего нужно внутри добавить отдельный блок и ему задать закругление, если нужно, чтобы скролл был снаружи

[Old_Chicken]

Раджаб Магомедов, получается контейнеры контейнере ? Но если я задам первому контейнеру скролл , для внутреннего он вроде бы не будет работать

Answer 1

[ViperOMG]

Попробуй вот так, как пример:

<div class="div_item">
<ul class="list__items">
       <li class="item__block"></li>
       <li class="item__block"></li>
       <li class="item__block"></li>
       <li class="item__block"></li>
       <li class="item__block"></li>
       <li class="item__block"></li>
       <li class="item__block"></li>
       <li class="item__block"></li>
  </ul>
</div>

.div_item {
    width: 236px;
    height: 188px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.list__items {
    width: 98%;
    border-radius: 30px;
    padding-left: 0;
    overflow: hidden;
}
.item__block {
    width: 100%;
    height: 34px;
    background: green;
    list-style-type: none;
} 
.div_item::-webkit-scrollbar {
            width: 6px;
            border-radius: 100px;
         } 
.div_item::-webkit-scrollbar-track {
            background: #E6E6E6;
            border-radius: 100px;
            margin: 20px 0;
         } 
.div_item::-webkit-scrollbar-thumb {
            background: #7F7F7F;
            border-radius: 100px;
         }
  .item__block {
            width: 224px;
            height: 34px;
            background: green;
            list-style-type: none;
  }
  .item__block:nth-child(2n) {
               background: red;
            }
         }